在使用CSS媒体查询实现响应式布局时，经常会出现明明写了针对特定屏幕尺寸的样式规则，但对应元素的样式却没有按照预期生效的情况。这类问题大多不是媒体查询本身语法错误，而是和CSS的层叠规则、样式规则的书写顺序密切相关。
CSS层叠规则的核心逻辑
CSS的全称是层叠样式表，层叠（Cascade）是决定最终生效样式的核心机制，它会按照优先级从高到低的顺序判断哪条规则最终生效：
- 首先是
!important标记的规则，优先级最高 - 其次是内联样式，也就是写在HTML元素style属性里的样式
- 然后是选择器的优先级，通常id选择器优先级高于类选择器，类选择器高于元素选择器
- 最后如果优先级相同，那么后定义的规则会覆盖先定义的规则
媒体查询样式不生效的常见原因
1. 规则顺序错误导致样式被覆盖
很多开发者会把媒体查询的规则写在普通样式的前面，这时候如果普通样式和媒体查询里的样式优先级相同，后面定义的普通样式就会覆盖媒体查询里的规则。比如下面的错误示例：
/* 错误写法：媒体查询在前，普通样式在后 */
@media screen and (max-width: 768px) {
.box {
width: 100%;
background: #f0f0f0;
}
}
.box {
width: 50%;
background: #fff;
}
当屏幕宽度小于等于768px时，媒体查询里的.box规则先被解析，之后普通样式里的.box规则后解析，因为两者优先级相同，所以最终生效的是普通样式的width和background，媒体查询的样式就被覆盖了。
2. 选择器优先级不足
如果普通样式使用的选择器优先级比媒体查询里的选择器高，即使媒体查询在后面，也会因为优先级低而不生效。比如下面的例子：
.box {
width: 50%;
}
@media screen and (max-width: 768px) {
/* 元素选择器优先级低于类选择器 */
div {
width: 100%;
}
}
这里.box是类选择器，优先级高于媒体查询里的div元素选择器，所以即使媒体查询的条件满足，宽度也不会变成100%。
3. 媒体查询条件写错
有时候问题出在媒体查询的条件本身，比如把max-width写成min-width，或者逻辑运算符用错，导致媒体查询的条件永远不满足，样式自然不会生效。比如想要适配小屏幕，却写成了：
/* 条件错误：小屏幕不会满足min-width: 1200px */
@media screen and (min-width: 1200px) {
.box {
width: 100%;
}
}
解决样式不生效的正确方法
1. 调整规则顺序，媒体查询放在普通样式之后
按照CSS层叠规则，相同优先级的规则后定义的生效，所以应该把媒体查询的规则放在对应普通样式的后面，这样当媒体查询条件满足时，它的规则会覆盖普通样式。正确的写法如下：
/* 普通样式先定义 */
.box {
width: 50%;
background: #fff;
}
/* 媒体查询放在后面 */
@media screen and (max-width: 768px) {
.box {
width: 100%;
background: #f0f0f0;
}
}
2. 提升媒体查询内选择器的优先级
如果普通样式的选择器优先级较高，可以在媒体查询里使用优先级相同的选择器，或者适当提升优先级。比如普通样式用了类选择器，媒体查询里也用类选择器，或者加上父元素选择器提升优先级：
.container .box {
width: 50%;
}
@media screen and (max-width: 768px) {
/* 提升优先级，和普通样式匹配 */
.container .box {
width: 100%;
}
}
3. 检查媒体查询条件是否正确
写媒体查询时要明确适配的场景，小屏幕适配用max-width，大屏幕适配用min-width，同时要注意单位是px还是em，避免条件写错。如果需要同时限制范围，可以使用and连接条件：
/* 适配宽度在768px到1200px之间的屏幕 */
@media screen and (min-width: 768px) and (max-width: 1200px) {
.box {
width: 80%;
}
}
调试技巧
当遇到媒体查询样式不生效时，可以通过浏览器的开发者工具排查：
- 打开开发者工具，切换到响应式模式，调整屏幕宽度看媒体查询是否被触发
- 选中对应元素，在样式面板里查看生效的样式是哪条，有没有被划掉的规则，被划掉的规则就是被覆盖的规则
- 查看被覆盖的规则的来源，判断是优先级问题还是顺序问题
注意：不要随意给样式加!important，虽然可以快速解决覆盖问题，但会导致后续样式维护难度大幅提升，优先通过调整顺序和优先级解决问题。