如何在单个CSS文件中使用多个媒体查询？为何仅最新查询生效？

嘿，我懂你遇到的困扰了——写了好几个媒体查询，但偏偏只有最后一个生效，这其实是CSS的层叠规则和媒体查询的范围逻辑在搞鬼！

问题出在哪？ #

你现在的写法是先写@media only screen and (max-width: 500px)，再写@media only screen and (max-width: 600px)。这里的核心问题是：当屏幕宽度小于等于600px的时候，两个媒体查询的条件其实都满足（毕竟500px肯定也小于600px对吧？）。而CSS的层叠规则是后面的样式会覆盖前面的同选择器样式，所以最后那个针对600px的查询会把前面500px的样式给覆盖掉，导致你看起来只有最后一个生效。

怎么解决？ #

有两种常用的正确写法，选你习惯的就行：

方式1：按max-width从大到小排序

把针对更大屏幕范围的查询放在前面，更小范围的放在后面。这样当屏幕宽度落在更小范围时，后面的样式会正确覆盖前面的：

/* 屏幕宽度≤600px时生效 */
@media only screen and (max-width: 600px) {
  .container {
    padding: 1rem;
    background-color: #eee;
  }
}

/* 屏幕宽度≤500px时生效，会覆盖上面的相同样式 */
@media only screen and (max-width: 500px) {
  .container {
    padding: 0.5rem;
    background-color: #ddd;
  }
}

这样一来，屏幕在500px以下时，用的是500px查询里的样式；屏幕在500-600px之间时，只用600px查询的样式，不会有冲突。

方式2：用min-width从小到大排序

如果你更习惯从“小屏幕到大屏幕”的逻辑，可以用min-width，把针对更小屏幕的查询放在前面，更大屏幕的放在后面：

/* 屏幕宽度≥500px时生效 */
@media only screen and (min-width: 500px) {
  .container {
    padding: 0.5rem;
    background-color: #ddd;
  }
}

/* 屏幕宽度≥600px时生效，覆盖前面的相同样式 */
@media only screen and (min-width: 600px) {
  .container {
    padding: 1rem;
    background-color: #eee;
  }
}

这种方式下，屏幕越大，后面的查询越晚触发，样式会自然覆盖前面的，也能达到预期效果。

小提醒 #

尽量别滥用!important来强制优先级，虽然它能暂时解决问题，但会让你的CSS变得难以维护。最好还是通过合理的媒体查询顺序来避免样式冲突~

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