viewport元标签缺失、位置错误或重复会导致媒体查询失效；语法错误如漏and、错别字、缺空格等会使规则被静默忽略；权重不足、顺序错误或使用已弃用的max-device-width也会导致样式不生效；HTML结构错误可能使DOM解析中断，CSS无法作用。
viewport 元标签缺失或写错位置
媒体查询在移动端不生效，第一反应不是 CSS 写错了，而是 <meta name="viewport"> 根本没起作用。浏览器默认用 980px 宽度渲染页面，@media (max-width: 768px) 自然永远不会匹配。
它必须满足三个硬条件：
-
<meta name="viewport" content="width=device-width, initial-scale=1">要写在<head>最顶部，前面不能有 JS、注释、模板占位符 - 必须在所有 CSS 引入（包括
<style>）之前 - 整个页面只能有一条，CMS、框架、插件悄悄注入的重复标签会覆盖你写的那条
真机调试时运行 document.documentElement.clientWidth，如果返回 980、1024 或远大于设备逻辑宽度（如 360），基本可断定 viewport 失效。
@media 语法错误导致整块规则被静默忽略
浏览器对媒体查询语法极其严格，一个字符错，整段规则就丢弃，且不报错——你只会看到“没反应”。
立即学习“前端免费学习笔记（深入）”；
高频出错点：
-
@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 (min-width: 768px), (max-width: 1024px)：逗号表示“或”，但括号没配对，实际应写成@media (min-width: 768px) and (max-width: 1024px)
打开 DevTools 的 Styles 面板，如果媒体查询规则压根没出现在列表里，大概率就是语法问题导致未解析。
选择器权重不够或被更高优先级样式覆盖
媒体查询“跑起来了”，但样式没体现，往往是层叠规则在起作用，而不是断点失效。
典型场景：
- 基础样式用了
!important，比如.header a { color: blue !important; } - 媒体查询里只写了
a { color: red; }，没加相同权重或!important，结果被覆盖 - 媒体查询写在基础样式前面，而后面又有一条同选择器、无媒体查询的规则，直接覆盖掉响应式效果
- 使用了
max-device-width：iOS/Safari 已实质弃用，一律改用max-width
在 Styles 面板里看目标属性是否被划掉（strikethrough），点开左侧箭头却找不到自己写的媒体查询规则，基本就是权重或顺序问题。
HTML 结构错误破坏 DOM 解析
一个常被忽视的根源：HTML 本身有语法错误，导致浏览器解析中断，后续的 <div class="mobile-display"> 等元素根本没进 DOM 树，CSS 再准也无从作用。
典型例子：
-
href="tel+"缺少闭合引号，变成href="tel+，后面所有标签嵌套错乱 -
<img src="icon.png" alt="menu没闭合引号，DOM 截断 - 自定义图标类名拼错，如
<i class="fa-solid fa-phone">写成<i class="fa-sold fa-phone">，虽不影响 DOM，但可能误导排查方向
这类错误在 DevTools 里往往表现为 Elements 面板中目标容器突然“消失”或结构异常，先检查 HTML 是否合法，比反复调 CSS 更快见效。
