媒体查询属性被其他断点覆盖，如何避免样式冲突？

你碰到的这个问题，核心原因是媒体查询的顺序不对！CSS的规则是“后来者居上”——当多个选择器的优先级相同，且多个媒体查询的条件同时满足时，后面定义的样式会覆盖前面的。

举个例子：当你的浏览器窗口宽度是400px时，max-width:576px、max-width:768px、max-width:992px、max-width:1200px这四个媒体查询的条件全部成立，所以最后定义的黄色背景就会把前面的红、绿、蓝样式通通覆盖掉，这就是为什么你看到始终是黄色的原因。

解决方案：调整媒体查询的顺序 #

有两种常用的写法可以解决这个问题，你可以根据自己的习惯选择：

1. 桌面优先（从大到小的max-width） #

如果习惯先写桌面端样式，再适配小屏幕，那你需要把max-width的媒体查询从最大的断点到最小的断点依次排列。这样当屏幕尺寸缩小到符合更小的断点时，后面的样式会覆盖前面的大屏样式：

div { height: 200px; }
/* 大于1200px */
@media (min-width: 1200px) { div { background-color: grey; } }
/* 小于1200px */
@media screen and (max-width: 1200px) { div { background-color: yellow; } }
/* 小于992px */
@media screen and (max-width: 992px) { div { background-color: blue; } }
/* 小于768px */
@media screen and (max-width: 768px) { div { background-color: green; } }
/* 小于576px */
@media screen and (max-width: 576px) { div { background-color: red; } }

2. 移动优先（从小到大的min-width） #

现在更推荐这种写法——先写移动端的默认样式，再用min-width从最小断点到最大断点依次扩展样式。这种方式下，只有当屏幕宽度达到或超过断点时，才会应用对应的样式，完全不会出现覆盖问题：

div { 
  height: 200px;
  background-color: red; /* 默认：小于576px的样式 */
}
/* 大于等于576px */
@media screen and (min-width: 576px) { div { background-color: green; } }
/* 大于等于768px */
@media screen and (min-width: 768px) { div { background-color: blue; } }
/* 大于等于992px */
@media screen and (min-width: 992px) { div { background-color: yellow; } }
/* 大于等于1200px */
@media (min-width: 1200px) { div { background-color: grey; } }

小提醒 #

不管用哪种方式，媒体查询的顺序都是关键：

• 使用max-width时，必须从大到小排列；
• 使用min-width时，必须从小到大排列；
• 优先级相同的情况下，CSS总是以最后生效的样式为准。

内容的提问来源于stack exchange，提问作者nshunz