本文详解为何 css 媒体查询中的响应式样式被忽略——根本原因在于样式表中规则的书写顺序：css 自上而下解析，后定义的样式会覆盖先定义的同名规则；媒体查询必须置于基础样式之后，或配合 !important 确保优先级。
本文详解为何 css 媒体查询中的响应式样式被忽略——根本原因在于样式表中规则的书写顺序：css 自上而下解析，后定义的样式会覆盖先定义的同名规则；媒体查询必须置于基础样式之后，或配合 !important 确保优先级。
在开发响应式页面时，你是否遇到过这样的问题：为
元素定义了基础字体大小（如 font-size: 24px），又在 @media (max-width: 768px) 中将其设为 18px，但实际在小屏幕上字体却未缩小？截图中显示的正是典型表现——浏览器始终渲染了基础样式，而媒体查询内的声明“失效”了。
这并非浏览器 Bug，而是 CSS 层叠（Cascading）机制的必然结果：浏览器按源码顺序逐行解析 CSS，后出现的声明优先级更高（相同选择器权重下）。若你的媒体查询写在基础样式之前（例如：媒体查询在第162行，而同名 .heading 类的基础样式在第167行），那么基础样式将覆盖响应式设置：
/* ❌ 错误：媒体查询写在基础样式之前 → 被覆盖 */
@media (max-width: 768px) {
.heading {
font-size: 18px; /* 永远不会生效 */
}
}
.heading {
font-size: 24px; /* 后定义，胜出 */
}
✅ 正确做法是将媒体查询置于所有相关基础样式之后：
/* ✅ 正确：基础样式在前，媒体查询在后 → 响应式生效 */
.heading {
font-size: 24px;
color: #333;
}
@media (max-width: 768px) {
.heading {
font-size: 18px; /* 覆盖上方声明 */
line-height: 1.4;
}
}
⚠️ 注意事项：
- 不要依赖 !important 作为常规解决方案——它破坏可维护性，仅建议在第三方库冲突等极少数场景临时使用；
- 避免在 HTML 标签内硬编码类名（如
）来“绕过”问题，这违背语义化与样式分离原则；
- 使用现代 CSS 方案（如 clamp()）可减少媒体查询依赖：font-size: clamp(1.125rem, 4vw, 1.5rem);；
- 开发时善用浏览器开发者工具的「Computed」面板，检查某元素最终生效的样式来源及层叠顺序。
总结：响应式失效，90% 是顺序问题。养成「基础样式 → 工具类 → 媒体查询」的 CSS 组织习惯，并保持媒体查询块集中、靠后，即可彻底告别“必须内联 class 才生效”的困扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
