移动端媒体查询不生效的主因是语法错误、viewport缺失、层叠覆盖或orientation触发条件不足。需检查and关键字、括号匹配、viewport标签、特异性冲突及组合断点写法。
媒体查询写对了，但移动端样式就是不生效——大概率不是逻辑问题，而是语法、环境或层叠规则在暗中作祟。
媒体查询语法错一个字符就全挂
媒体查询对空格、括号、关键字极其敏感。比如 @media screen (max-width: 768px) 看似合理，但缺了 and，整个块会被浏览器直接忽略，后续所有规则都不解析。
-
@media screen and (max-width: 768px)✅ 正确（screen和(max-width:...)之间必须有and） -
@media screenand(max-width: 768px)❌ 错误（screenand被当做一个非法媒体类型） -
@media (max-width: 768px) { ... }✅ 可用（省略媒体类型时默认为all，但兼容性略弱） - 括号必须成对，
@media (max-width: 768px { ... }这种漏掉右括号，会导致其后所有 CSS 规则失效
viewport meta 标签没配，媒体查询根本不会触发
没有 <meta name="viewport">，iOS Safari 和多数安卓 WebView 就不会按真实视口宽度计算媒体查询条件，@media (max-width: 768px) 可能永远不匹配。
- 必须包含
width=device-width，否则横屏时仍按竖屏宽度渲染 - 避免写死
width=375或width=414，这会让横屏时orientation: landscape失效 - 检查是否被 JS 动态覆盖：
document.querySelector('meta[name="viewport"]').setAttribute(...)可能中途改掉原始值
样式生效但被更高特异性规则覆盖
媒体查询里的规则不是“自动优先”，它照样参与 CSS 层叠。常见现象是：断点内 .headerContainer 的 flex-direction 生效了，但 color 没变——因为外部有个 .headerContainer a { color: #333; } 特异性更高。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具的“Computed”面板，看目标元素最终
color值来自哪条规则 - 检查是否用了 ID 选择器、内联样式或
!important干扰了媒体查询内的声明 - 避免在媒体查询里写过于宽泛的选择器，比如
div p容易被更精确的.content p覆盖
orientation 查询延迟或不触发
@media (orientation: landscape) 不是旋转瞬间就切换，它依赖重排（reflow）完成，且只在逻辑宽度 > 高度时才匹配——有些设备横屏后宽度仍小于高度（比如窄长屏手机），导致不触发。
- 更稳妥的写法是组合判断：
@media (orientation: landscape) and (min-width: 480px) - 首次加载时方向可能未初始化，可加一条默认规则：
@media (orientation: portrait) { ... } - 不要依赖
orientation做关键布局，优先用min-width/max-width
真正卡住的往往不是“怎么写”，而是“为什么写了却没反应”——语法、viewport、层叠、触发时机，四者漏查一项，调试就会陷入死循环。
