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或更低时，媒体查询max-width 420px dosent work和HTML元素被CSS覆盖，大于900px窗口..

有什么想法吗？

Answer 1

我认为，您不会在新媒体查询中更改样式。例如，如果h2中的@media screen and (max-width: 900px){获得color:green并且您未在@media screen and (max-width: 420px){中更改它，则会保留颜色为绿色。您必须在新media query s中覆盖新样式。

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

中的颜色，则颜色为绿色

为max-width 420px编写的@media查询不适用于320px以下的宽度

1 个答案: