index.html中怎么使用媒体查询做适配

时间：2026-07-26 17:40:54 编辑：袖梨来源：一聚教程网

媒体查询必须写在CSS规则中才生效，不可置于HTML标签、JS字符串或内联style属性内；须配合viewport meta标签使用，推荐移动端优先的min-width单向断点。

媒体查询必须写在 CSS 里，不能直接塞进 index.html 的 HTML 标签中，也不能当 JS 字符串拼接 —— 否则完全不生效。

常见错误是把 @media (max-width: 768px) { ... } 写在 <script> 里、JS 模板字符串里，或者当成 HTML 属性加在 <div media="..."> 上。这些写法浏览器直接忽略。

没有 <meta name="viewport" content="width=device-width, initial-scale=1">，移动端浏览器会默认以桌面视口宽度（约 980px）渲染页面，@media (max-width: 768px) 就永远触发不了。

断点不是固定写 @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()，否则媒体查询再准也没用

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 字号 —— 这时候适配效果全泡汤，问题根本不在媒体查询本身。