媒体查询本身不会失效，失效的是被更高权重样式覆盖的规则；color不变因被内联样式或!important锁死，font-size变因无高优规则占位；需检查DevTools中color是否被划掉，并优先通过父容器限定等方法提升权重而非滥用!important。
媒体查询本身不会“失效”，失效的是你写的那条规则——它被更高权重的样式覆盖了，浏览器照常解析、照常计算，只是没轮到它生效。
为什么 color 不变但 font-size 会变
这不是媒体查询选择性工作，而是 CSS 层叠机制在起作用。同一个元素上，color 可能被内联样式 style="color: #333" 或外部 .btn { color: blue !important; } 先锁死；而 font-size 恰好没被任何高优规则占位，所以你的媒体查询规则自然就“赢了”。
- 打开 DevTools → 选中元素 → 看
color在 Styles 面板里是否被划掉（strikethrough） - 如果被划掉，点左侧小箭头展开所有匹配项，重点找带
element.style或!important的来源 - 别只盯着媒体查询块，要查整个样式表里有没有更早定义、但权重更高的同名规则
提升权重比加 !important 更可靠
滥用 !important 是临时止痛药，不是解法。它会让后续维护雪球越滚越大，尤其在 Safari 或旧版 Chrome 中，多个 !important 并存时解析顺序可能不一致。
- 用父容器限定：
@media (max-width: 768px) { .main-nav .btn { color: red; } }—— 比单写.btn权重高 - 用属性选择器强化：
.btn[data-role="primary"]，前提是 HTML 真有这个属性 - 避免
body .btn这种写法：body权重太低，几乎不提升总分 - 重复类名（如
.btn.btn）可兜底，但语义弱，仅限紧急修复
真正卡住人的三个隐藏点
权重问题常和另外两个因素交织，单独调一个很难见效：
立即学习“前端免费学习笔记（深入）”；
-
<meta name="viewport">缺失或不完整 —— 尤其 iOS Safari 上，没有maximum-scale=1会导致缩放干扰断点计算 - CSS 加载顺序错误：你的自定义媒体查询 CSS 必须在
bootstrap.min.css之后引入，否则规则还没出场就被盖过去了 - 语法错误导致整块解析中断：比如前面
@keyframes少了个}，浏览器可能直接跳过后面所有规则，包括你的媒体查询
最常被忽略的是：你以为在改媒体查询，其实是在和整个样式表的加载顺序、全局重置、构建工具压缩行为（比如 cssnano 错删规则）和浏览器渲染差异同时较劲。
