为什么CSS媒体查询写了却没有触发？
作者：袖梨
2026-08-30
90%的@media未触发是viewport标签失效或CSS语法错误所致；需确保viewport唯一且位于head最顶部，检查document.documentElement.clientWidth是否为设备逻辑宽度，并验证@media语法是否被静默丢弃。
90% 的情况，@media 没触发不是 CSS 写错了，而是 <meta name="viewport"> 根本没生效。
检查 <meta name="viewport"> 是否唯一且位置正确
移动端浏览器默认用 980px 宽度渲染页面，@media (max-width: 768px) 在这种视口下永远不匹配。必须确保：
-
<meta name="viewport" content="width=device-width, initial-scale=1">出现在<head>最顶部，前面不能有 JS、注释、模板占位符 - 它必须在所有
<style>和<link rel="stylesheet">之前 - 整个 HTML 中只能有一条——Next.js、UniApp 或 CMS 可能悄悄注入第二条，后加载的会覆盖你写的那条
- 真机调试时运行
document.documentElement.clientWidth，若返回 980、1024 或远大于设备逻辑宽度（如 iPhone 15 是 390），就说明 viewport 失效
验证 @media 语法是否被静默丢弃
CSS 解析器对媒体查询语法极其严格：错一个字符，整条规则就被忽略，且控制台不报错。常见失效写法：
-
@media screen (max-width: 768px)❌ —— 缺and，应为@media screen and (max-width: 768px)✅ -
@media (max-with: 768px)❌ ——with是错别字，应为width -
@media only screenand(max-width: 768px)❌ ——screenand连写，缺空格 -
@media (max-width: 768)❌ —— 缺单位px；@media (max-width: 768px {❌ —— 右括号漏了 - DevTools 的 Styles 面板里如果完全看不到这条
@media规则，基本就是语法问题导致未解析
确认样式没有被更高优先级规则覆盖
媒体查询“触发了”，但效果看不见，大概率是层叠机制在起作用：
- 打开 DevTools 的「Computed」面板，直接看目标属性最终来自哪条规则，而不是只盯「Styles」里有没有这条媒体查询
- 检查是否用了 ID 选择器、内联样式或
!important干扰了媒体查询内的声明 - 避免在媒体查询里写宽泛选择器，比如
div p容易被更精确的.content p覆盖 - 若媒体查询中改了
z-index却无效，先确认元素是否设置了position: relative（或其它定位值）——z-index只对定位元素生效
警惕 max-device-width 和过时写法
max-device-width 在现代 Safari（iOS/iPadOS/macOS）中已实质失效，系统返回的是逻辑像素而非物理分辨率，且该特性已被 W3C 弃用：
- 不要写
@media (max-device-width: 768px)，一律替换为@media screen and (max-width: 768px) -
max-width基于当前视口宽度，可响应缩放、分屏、DevTools 调整；而max-device-width不会随这些行为变化 - 如果设了
initial-scale=0.5，视口宽度会翻倍，断点值也要同步放大（例如原max-width: 768px得改成max-width: 1536px） - 别依赖
device-pixel-ratio做布局判断——它不参与响应式重算，也不可靠
最常被忽略的点：viewport 标签一旦位置靠后或重复，整个媒体查询体系就失去前提；而语法错误又不报错，容易让人误以为“CSS 生效了但没起作用”。动手前先查 document.documentElement.clientWidth，再开 DevTools 看 Styles 面板里有没有那条 @media 规则——这两步比反复改 CSS 快得多。
