Css @为最大宽度420px写入的媒体查询在宽度低于320px时不起作用

我有如下类似的媒体查询条件

/* CSS for bigger than 900 */

@media screen and (max-width: 900px){
/* CSS for smaller than 900 */
}

@media screen and (max-width: 420px){
/* CSS for smaller than 420 */
}

当浏览器宽度大于900px时，它可以正常工作。当浏览器宽度在900到420px之间时，900px的媒体查询工作正常。。理想情况下，当浏览器宽度介于0到420px之间时，它也适用于媒体查询420x。。但是，当浏览器宽度设置为320px或更低时，对于大于900px的窗口，最大宽度为420px的介质查询和HTML元素将被CSS覆盖

---

有什么想法吗

我认为，在新媒体查询中您不会更改样式。例如，如果

@媒体屏幕中的
h2
和（最大宽度：900px）{

获取

颜色：绿色

，并且在

@媒体屏幕和（最大宽度：420px）{

中您不会更改它，它将保持绿色。您必须在新

媒体查询中覆盖新样式


@媒体屏幕和（最大宽度：900px）{
身体{
背景色：红色；
}
h1{
颜色：绿色；
}
}
@媒体屏幕和屏幕（最大宽度：420px）{
身体{
背景颜色：蓝色；
}
}
我是h1
即使在低于320px的情况下，您的媒体查询也运行良好，可能是您没有更改该查询中存在的元素在媒体查询420px下的样式。检查是否包含所有代码很容易。