在响应式网页开发过程中，CSS媒体查询是实现不同屏幕尺寸适配的核心手段，但如果使用不当很容易出现样式冲突的问题，导致页面在特定屏幕宽度下显示不符合预期。比如设置了移动端和桌面端的媒体查询样式，却出现桌面端样式覆盖了移动端的情况，或者同个选择器在不同媒体查询里的属性互相干扰。
常见的媒体查询样式冲突原因
首先要明确冲突产生的根源，才能针对性解决，常见原因有以下几类：
- 媒体查询范围存在重叠，比如同时设置了
max-width: 768px和min-width: 768px的规则，在768px宽度时两个规则都会生效 - 选择器优先级相同的情况下，后定义的媒体查询规则会覆盖先定义的规则，不符合开发预期
- 全局样式和媒体查询内的样式优先级判断失误，导致全局样式覆盖了媒体查询内的适配样式
- 多个媒体查询内对同个元素的同个属性设置了不同值，没有明确的覆盖规则
解决媒体查询样式冲突的方法
1. 调整选择器优先级
当冲突是因为优先级不足导致时，可以提升媒体查询内选择器的优先级，确保适配样式能正常生效。比如原本的选择器是类选择器，可以改成类加元素的选择器，或者添加!important声明，不过!important要谨慎使用，避免后续维护困难。
下面是调整优先级的示例：
/* 全局样式 */
.box {
width: 100%;
background: #fff;
}
/* 移动端媒体查询，提升选择器优先级 */
@media screen and (max-width: 768px) {
div.box {
background: #f5f5f5;
padding: 10px;
}
}
/* 桌面端媒体查询，优先级和移动端一致，后定义会覆盖移动端 */
@media screen and (min-width: 769px) {
div.box {
background: #e8e8e8;
padding: 20px;
}
}
2. 规范媒体查询的范围划分
避免媒体查询范围重叠是减少冲突的有效方式，通常采用移动端优先或者桌面端优先的写法，统一范围划分逻辑。比如采用移动端优先的写法，先写小屏幕的默认样式，再用min-width逐步适配大屏幕，这样不会出现范围交叉的问题。
移动端优先的媒体查询示例：
/* 默认移动端样式，适配所有小于768px的屏幕 */
.box {
width: 100%;
font-size: 14px;
}
/* 平板适配，仅适配768px到1024px的屏幕 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.box {
width: 80%;
font-size: 16px;
}
}
/* 桌面端适配，仅适配大于1024px的屏幕 */
@media screen and (min-width: 1024px) {
.box {
width: 60%;
font-size: 18px;
}
}
3. 合理控制样式定义的先后顺序
CSS的层叠规则是后定义的同优先级样式会覆盖先定义的样式，因此可以把范围更大的媒体查询放在前面，范围更小的放在后面，这样小范围的样式会覆盖大范围的样式，符合适配逻辑。比如先写max-width: 1200px的规则，再写max-width: 768px的规则，这样768px以下的屏幕会应用后者，不会被前者覆盖。
顺序调整的示例：
/* 大屏幕适配规则，先定义 */
@media screen and (max-width: 1200px) {
.header {
height: 60px;
}
}
/* 小屏幕适配规则，后定义，会覆盖大屏幕的规则 */
@media screen and (max-width: 768px) {
.header {
height: 50px;
}
}
4. 使用CSS层叠层（@layer）隔离样式
如果项目支持较新的CSS特性，可以使用@layer来定义不同的样式层，给媒体查询的样式设置更低的层叠优先级，避免和全局样式冲突。层的优先级是后定义的层优先级更高，也可以手动指定层的顺序。
使用@layer的示例：
/* 定义全局样式层 */
@layer base {
.card {
border: 1px solid #ddd;
margin: 10px;
}
}
/* 定义媒体查询样式层，优先级低于base层 */
@layer media-style {
@media screen and (max-width: 768px) {
.card {
margin: 5px;
border-radius: 8px;
}
}
}
冲突排查小技巧
当遇到难以定位的媒体查询样式冲突时，可以打开浏览器的开发者工具，选中对应的元素，查看样式面板里的生效样式和覆盖样式，找到冲突的媒体查询规则，再对照上面的方法调整。也可以暂时注释掉部分媒体查询规则，逐步缩小排查范围，快速定位冲突来源。
另外要注意，媒体查询里的样式如果没有生效，不一定是冲突问题，也可能是媒体查询的条件写错，比如把min-width写成max-width，或者单位写错，排查时也要先确认媒体查询条件本身是否正确。