媒体查询断点失效？检查Meta标签与CSS优先级

CSS媒体查询断点失效往往并非代码逻辑错误，而是三个隐蔽却关键的底层问题在作祟：缺失或错误的viewport meta标签导致浏览器根本无法进入移动视口模式；媒体查询语法中一个字符的疏漏（如漏掉and、拼错max-width、空格缺失）就会让整条规则静默失效；以及样式未生效实为层叠优先级或选择器匹配失败所致，而非断点本身有问题——尤其在Safari等真实环境中，通配符重置、!important滥用和大小写/空格细节更易引发“看似失效”的假象。真机调试+DevTools精准定位（看clientWidth、检查Styles面板是否显示规则、观察属性是否被划掉）才是破局核心。

viewport meta 标签缺失或写错位置

媒体查询断点不生效，最常见、最隐蔽的原因就是 标签没写、写错位置，或属性值不完整。它不是可选的“增强体验”配置，而是媒体查询能运行的硬性前提。

浏览器在移动端默认以桌面视口（通常是 980px）渲染页面；没有这个标签，@media (max-width: 768px) 永远不会触发——因为视口宽度根本不是 768px。

• 必须放在 内，且在所有 CSS 引入之前（包括