index.html中怎么使用媒体查询做适配
作者：袖梨
2026-07-26
媒体查询必须写在CSS规则中才生效，不可置于HTML标签、JS字符串或内联style属性内；须配合viewport meta标签使用，推荐移动端优先的min-width单向断点。
媒体查询必须写在 CSS 里，不能直接塞进 index.html 的 HTML 标签中，也不能当 JS 字符串拼接 —— 否则完全不生效。
media queries 必须写在 CSS 规则中才生效
常见错误是把 @media (max-width: 768px) { ... } 写在 <script> 里、JS 模板字符串里，或者当成 HTML 属性加在 <div media="..."> 上。这些写法浏览器直接忽略。
-
<link rel="stylesheet" href="style.css">引入的外部 CSS 文件里可以写 -
<style>标签内部可以写（推荐放在<head>中） - 内联样式
style="..."不支持@media，别试 -
<link media="...">只控制整张样式表是否加载，不是用来写条件样式的
viewport 标签没加，媒体查询基本白搭
没有 <meta name="viewport" content="width=device-width, initial-scale=1">，移动端浏览器会默认以桌面视口宽度（约 980px）渲染页面，@media (max-width: 768px) 就永远触发不了。
- 这个
<meta>必须放在<head>最前面，且不能重复 - 如果加了但页面仍放大，检查是否误设了
html { font-size: 62.5%; }或其他影响根尺寸的规则 - 真机测试前，先用 Chrome DevTools 的
Toggle device toolbar模拟缩放，观察断点是否准确触发
断点怎么选：别抄别人，看自己内容“崩坏”的位置
断点不是固定写 @media (max-width: 768px) 就行，而是要打开 index.html，拖动浏览器窗口，找到文字换行异常、图片溢出、按钮挤成一团的临界宽度。
立即学习“前端免费学习笔记（深入）”；
- 优先用
min-width递增写法（移动端优先），比如：@media (min-width: 480px) { ... }、@media (min-width: 768px) { ... } - 避免混用
min-width和max-width，容易因覆盖顺序出错；若必须范围匹配，统一用@media (min-width: 480px) and (max-width: 767px) - 用
em替代px（如@media (max-width: 40em)），更适配用户自定义字体缩放 - 配套资源必须同步：图片加
max-width: 100%; height: auto;，字体用rem或clamp()，否则媒体查询再准也没用
想动态响应视口变化？media queries 本身做不到
CSS 媒体查询是静态声明，编译后就固定了。它不能在运行时根据 window.innerWidth 实时计算或响应用户缩放行为。
- 需要真动态判断（比如横竖屏切换、深色模式变更、折叠屏展开），得用
window.matchMedia() - Sass/Less 预处理器里的
@media是编译时计算，最终输出仍是静态 CSS，和运行时无关 - CSS 变量（
--xxx）和calc()可以在媒体查询块内使用，但不能出现在@media条件表达式里，例如@media (min-width: calc(var(--bp) * 1px))是非法的
最常被忽略的一点：写了十组 @media，但忘了给图片加 max-width: 100%，或者文字用了固定 px 字号 —— 这时候适配效果全泡汤，问题根本不在媒体查询本身。
