Google Dev Tools调试响应式设计时加载错误CSS媒体查询规则如何解决

你写的两个媒体查询范围存在重叠，且CSS规则遵循后定义优先的优先级逻辑。当页面视口宽度≤375px时，max-width:375px和max-width:480px的查询条件会同时触发，写在后面的max-width:480px区块内的#name样式优先级更高，会覆盖前一个区块的同名样式，所以你只会看到第二个规则生效。

• 调整媒体查询的排列顺序，按照max-width从大到小的顺序写，把范围更大的查询放在前面，范围更小的放在后面。修改后代码如下：

@media screen and (max-width:480px) {
...
  #name{
      font-size: calc(1rem + .1vw);
    }
...
}

@media screen and (max-width:375px) {
...
    #name{
      font-size: calc(.8rem + .1vw);
    }
...
}

这样宽度≤375px时，两个查询都触发，后定义的375px区块样式会覆盖480px区块的样式，符合预期。

• 给媒体查询增加宽度下限，避免范围重叠：

/* 适配375px到479.98px的宽度区间 */
@media screen and (min-width:375px) and (max-width:479.98px) {
...
  #name{
      font-size: calc(1rem + .1vw);
    }
...
}

/* 适配374.98px以下的宽度区间 */
@media screen and (max-width:374.98px) {
...
    #name{
      font-size: calc(.8rem + .1vw);
    }
...
}

使用带小数的像素值是为了避免不同设备的像素精度计算误差，导致边界宽度同时命中两个查询规则。

• 采用移动端优先的写法，用min-width代替max-width，从小到大排列查询规则，也可以避免这类覆盖问题。

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