@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){