viewport meta 标签缺失或写错位置
媒体查询断点不生效，最常见、最隐蔽的原因就是 <meta name="viewport"> 标签没写、写错位置，或属性值不完整。它不是可选的“增强体验”配置，而是媒体查询能运行的硬性前提。
浏览器在移动端默认以桌面视口（通常是 980px）渲染页面；没有这个标签，@media (max-width: 768px) 永远不会触发——因为视口宽度根本不是 768px。
- 必须放在
内，且在所有 CSS 引入之前（包括<style></style>标签前） - 正确写法只有一行：
<meta name="viewport" content="width=device-width, initial-scale=1"> - 常见错误：
name="viewpoint"（拼写错）、content="width=device"（缺-width）、content="width=320"（固定像素，断点失效） - 真机调试时，用 DevTools 查
document.documentElement.clientWidth：若显示 980 或 1024，基本可确认 viewport 失效
媒体查询语法写错：and 缺失、括号错位、拼写错误
浏览器对媒体查询语法非常严格，一个字符错就整块规则被忽略，且不报错——你只能看到“没反应”。
典型错误包括：@media screen (max-width: 768px)（漏 and），@media (max-with: 768px)（max-with 是无效特性），或 @media only screenand(max-width: 768px)（screenand 连在一起，缺少空格）。
- 标准格式是：
@media [only | not] <media-type> and (<media-feature>)</media-feature></media-type> - 推荐统一用：
@media only screen and (max-width: 768px)——only防旧浏览器误读，and不可省略，括号必须包裹媒体特性 - 检查 DevTools 的 Styles 面板：如果媒体查询规则压根没出现在列表里，大概率是语法错误导致未解析
选择器权重不够或匹配失败
媒体查询本身“运行了”，但样式没生效，往往不是断点问题，而是 CSS 层叠机制在起作用——比如外层写了 .header a { color: blue !important; }，而媒体查询里只写 a { color: red; }，那 color 就永远变不了。
- 打开 DevTools → 选中目标元素 → 看
color属性旁是否有横线划掉：有，说明被更高优先级规则覆盖 - 别急着加
!important修复——它只是临时探针，会掩盖真实问题，且在 Safari 中可能因解析顺序异常导致行为不一致 - 更可靠的做法是提升选择器特异性：把
.nav-link改成.header .nav-link，或确保媒体查询内选择器与 HTML 结构完全对应（例如用body而非.body） - 注意大小写：
.Header匹配不到class="header"；空格也不能少：.nav ul li和.navul li完全是两回事
Safari 和部分 WebView 对通配符与重置样式的特殊处理
在 iOS Safari、微信内置浏览器等环境下，即使 viewport 和语法都正确，媒体查询仍可能“看起来失效”——根源常在于用户代理样式、Normalize.css 或通配符重置与媒体查询叠加时的兼容性差异。
例如，某些版本 Safari 会将 * { box-sizing: border-box; } 在媒体查询生效前就应用，导致 padding 计算偏差，进而让元素实际宽度超出断点阈值。
- 不要依赖通配符做全局重置，改用更明确的选择器，如
html *, html *::before, html *::after - 检查是否在媒体查询外部定义了同名类并带
!important（比如全局.btn { padding: 10px !important; }），这会让媒体查询内的.btn { padding: 5px; }完全无效 - 真机测试不可替代：Chrome DevTools 模拟器会自动补 viewport，但 Safari Web Inspector 才反映真实解析逻辑
真正卡住人的，从来不是“怎么写媒体查询”，而是 viewport 是否生效、选择器是否命中、以及那条被划掉的样式到底输给了谁——这三个点没盯住，调再多断点都没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
