@最大寬度為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到420px之間時，對於900px的媒體查詢工作正常。理想情況下，當瀏覽器寬度在0到420px之間時，媒體查詢也應適用於420x。但是，當瀏覽器寬度設置為320px或更低時，媒體查詢最大寬度420px的像素工作，並且HTML元素被CSS元素覆蓋，以用於大於900px的窗口。

有任何想法嗎？

Answer 1

我認為，您不會在新媒體查詢中更改樣式。例如，如果@media screen and (max-width: 900px){ h2 @media screen and (max-width: 900px){獲得color:green而您沒有在@media screen and (max-width: 420px){更改@media screen and (max-width: 420px){ ，它保持綠色。您必須在新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> 

在這種情況下 ，如果在@media screen and (max-width: 420px){不更改顏色，則h1始終為綠色， @media screen and (max-width: 420px){