如何让@media(max-width:425px)独立生效，不继承768px断点样式

问题原因 #

max-width 媒体查询的匹配规则是所有视口宽度小于等于设定值的场景都会命中，你当前的写法下，宽度为400px的设备会同时命中 max-width:1024px、max-width:768px、max-width:425px 三条规则，默认按CSS书写顺序后写的规则优先级更高，但如果出现未覆盖的属性就会继承上层规则的样式。你需要明确每个断点对应的宽度区间，就能实现独立样式的效果。

解决方案 #

推荐使用区间型媒体查询，给每个断点明确上下限：

.container{
    background-color: red; /* 视口宽度大于1024px时生效 */
    height: 100vh;
}

/* 769px - 1024px 区间 */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        background-color: yellow;
    }
}

/* 426px - 768px 区间 */
@media (min-width: 426px) and (max-width: 768px) {
    .container {
        background-color: green;
    }
}

/* 376px - 425px 区间 */
@media (min-width: 376px) and (max-width: 425px) {
    .container {
        background-color: blue;
    }
}

/* 321px - 375px 区间 */
@media (min-width: 321px) and (max-width: 375px) {
    .container {
        background-color: rosybrown;
    }
}

/* 小于等于320px 区间 */
@media (max-width: 320px) {
    .container {
        background-color: rosybrown;
    }
}

额外排查点 #

如果你想继续使用纯 max-width 的写法，只要保证媒体查询按宽度从大到小顺序书写，逻辑上也可以生效，如果出现样式不生效的情况，可以按以下步骤排查：

• 打开浏览器开发者工具的元素面板，查看 .container 元素的样式列表，确认对应断点的媒体查询规则是否被匹配，是否被更高优先级的规则（比如行内样式、带!important的规则、权重更高的选择器）覆盖
• 如果React项目使用了CSS Modules、styled-components等方案，确认媒体查询代码被正确编译，没有出现类名不匹配或者规则被摇树优化移除的问题
• 你当前的HTML中meta viewport标签配置是正确的，不需要修改

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