为最大宽度 420px 编写的 @media 查询不适用于 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 */
}

当浏览器宽度大于 900 像素时，它可以正常工作。当浏览器宽度在 900 到 420 像素之间时，900 像素的媒体查询可以正常工作。理想情况下，当浏览器宽度在 0 到 420 像素之间时，它也应该适用于 420 倍的媒体查询。但是，当浏览器宽度设置为 320 像素或更低时，媒体查询最大宽度为 420px 的工作，并且 HTML 元素被 CSS ment 覆盖以获取大于 900px 的窗口..

有什么想法吗？

Answer 1

我认为，你不要在新媒体查询中改变样式。例如，如果h2 in @media screen and (max-width: 900px){ 得到color:green 而你没有在@media screen and (max-width: 420px){ 中改变它，它会保持绿色。你必须覆盖新新的media querys 中的样式。

@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 始终为绿色