媒体查询生效需满足四条件：基础样式必须在前、媒体查询在后；无更高权的内联样式干扰；css语法无错误；html中存在正确viewport meta标签。
检查媒体查询是否被基础样式“后声明”覆盖
媒体查询本身不提升选择器权重，只控制规则启用时机。如果它写在基础样式前面，而两者选择器权重相同（比如都是 .card），那后面的基础样式永远胜出——浏览器按从上到下顺序解析，后出现的同权规则直接覆盖前面的。
常见错误写法：
@media (max-width: 768px) {
.card { padding: 1rem; }
}
.card { padding: 2rem; } /* ❌ 这行在后 → 永远生效 */
正确顺序必须是基础样式在前、媒体查询在后：
.card { padding: 2rem; }
@media (max-width: 768px) {
.card { padding: 1rem; } /* ✅ 启用时才能覆盖 */
}
- 不要依赖“媒体查询更特殊”来压倒普通规则
- 同一份 CSS 文件里，顺序就是优先级的一部分
- 若用多个 CSS 文件引入，
link标签顺序也影响层叠：后加载的文件内规则会覆盖先加载的
确认是否有内联样式（style 属性）干扰
内联样式的特异性是 (1,0,0,0)，任何外部 CSS 选择器（包括加了 !important 的媒体查询）都赢不了它。开发者工具里看到属性带删除线、悬停提示 “This rule was overridden by inline style”，基本就坐实了。
容易被忽略的来源：
-
v-bind:style或:style={...}在 Vue/React 中动态注入 - 第三方 UI 库（如 Ant Design、Element Plus）初始化时自动写入
style - JS 脚本执行了
el.style.padding = '1rem'等操作
临时验证方法：在 Console 执行 document.querySelector('.card').removeAttribute('style')，再看媒体查询是否立刻生效。
排查 @media 块是否被语法错误静默吞掉
CSS 解析器遇到语法错误（比如漏分号、括号不匹配、@keyframes 缺 }），可能直接跳过后续所有规则，包括整个 @media 块——你根本看不到报错，但样式就是不生效。
快速定位方式：
- 打开 DevTools 的 Console 面板，筛选
Parse error或Invalid CSS - 把整个 CSS 文件复制进在线 CSS 验证器（如 jigsaw.w3.org/css-validator/）
- 删掉除
@media和最简测试规则外的所有代码，例如：@media (max-width: 768px) { body { background: tomato; } }看body是否变红
验证 viewport 是否缺失或配置错误
没有正确的 <meta name="viewport">，移动端浏览器默认用桌面视口（通常是 980px 宽），@media (max-width: 768px) 就永远不会触发——不是样式写错了，是断点压根没机会跑。
必须满足三点：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">存在于最顶部（仅允许在<meta charset>或<title></title>之后） - 不能重复声明，否则浏览器只认第一个
- 禁用
max-device-width：它在 Safari 中已不可靠，一律改用max-width
最终 HTML 源码里右键「查看页面源代码」，确认这行真实存在且位置正确——框架（Next.js、Nuxt）或 CMS 插件可能偷偷覆盖或挪动它。
真正卡住人的往往不是“怎么写媒体查询”，而是“为什么写了却像没写”。顺序、内联样式、语法错误、viewport，四者任一出问题，都会让 @media 彻底失语。查的时候别跳步，挨个排除比反复改断点值更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
