Html 当媒体查询覆盖其他媒体查询时

我为登录页中的特定元素创建了一系列查询

因此，对于我的HTML，我有以下内容：

<div class="hsContent">
   <article> here is my awesome content. boom! </article>
</div>

因此，我编写了一系列媒体查询，以深入到更小的屏幕尺寸，当时最小的是420px

    @media only screen and (min-width: 320px){
     .hsContent {
        width: 300px;
        position: absolute;
        left: 10px;
        top: 24%;
        padding: 5px 30px 30px 30px;
      }
    }

当我使用开发工具在Chrome中进行测试时，这很好。但是，在添加另一个320px宽度的媒体查询并使用开发工具进行检查后：

@media only screen and (min-width: 320px){
   .hsContent{
       width:300px;
       top: 10%; !important;
       padding-left: 10px;
       padding-right: 10px;
    }
}

…该查询被划掉，就好像它被覆盖一样（下面的屏幕帽）…在本例中，它被前面的420px宽度查询覆盖。（注意，为了强制定位，甚至包括了！important。）

（还显示了先前对被覆盖的960px宽度的查询-当然这是有意义的）

---

那么，我做错了什么？我能做些什么来解决这个问题

我想这就是你想要的：

我重新安排了媒体查询，在其中一个查询中添加了

420px

，并修复了语法错误：

css

.hsContent {
    max-width: 600px;
    position: absolute;
    left: 25%;
    right: 25%;
    top: 10%;
    z-index: 10;
}

@media only screen and (min-width: 320px){
   .hsContent{
       width:300px;
       background-color: red;
       top: 10%;
       padding-left: 10px;
       padding-right: 10px;
    }
}
@media only screen and (min-width: 420px){
     .hsContent {
        background-color: blue;  
        width: 300px;
        position: absolute;
        left: 10px;
        top: 24%;
        padding: 5px 30px 30px 30px;
      }
    }

---

首先，使用

！重要信息

是这样做的

top:10%！重要的

如果中间没有分号，两个媒体查询的宽度也会设置为相同的

宽度

另一个媒体查询的结果是什么。

@media only screen and (min-width: 320px)
  .hsContent {
    width: 300px;
    top: 10%;
    padding-left: 10px;
    padding-right: 10px;
  }
}

.hsContent {
    max-width: 600px;
    position: absolute;
    left: 25%;
    right: 25%;
    top: 10%;
    z-index: 10;
}

@media only screen and (min-width: 320px){
   .hsContent{
       width:300px;
       background-color: red;
       top: 10%;
       padding-left: 10px;
       padding-right: 10px;
    }
}
@media only screen and (min-width: 420px){
     .hsContent {
        background-color: blue;  
        width: 300px;
        position: absolute;
        left: 10px;
        top: 24%;
        padding: 5px 30px 30px 30px;
      }
    }