@media查询编写的最大宽度420px不适用于宽度小于320px

Question

我的媒体查询条件类似如下所示。

/* 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到420像素之间时，900px的媒体查询可以正常工作。理想情况下，当浏览器宽度为0到420像素之间时，媒体查询应该也适用于420x。但是，当浏览器宽度设置为320像素或更低时，查询最大宽度420px dosent工作和HTML元素被超过CSS CSS更大于900px窗口..

任何想法？

Answer 1

我想，您不改变风格在新媒体query.for例如，如果h2在@media screen and (max-width: 900px){得到color:green和你不改变它在@media screen and (max-width: 420px){，它停留在颜色green.you必须overlary在新media query的新样式。

@media screen and (max-width: 900px){ 
 
    body { 
 
    background-color: red; 
 
    } 
 

 
    h1{ 
 
    color: green; 
 
    } 
 
} 
 

 
@media screen and (max-width: 420px){ 
 
    body { 
 
    background-color: blue; 
 
    } 
 
}

<h1>I am h1</h1>

在这种情况下，h1总是有色泽翠绿，如果不改变这颜色@media screen and (max-width: 420px){