html - 当媒体查询覆盖其他媒体查询时

Question

我为着陆页中的特定元素创建了一系列查询。

所以对于我的 HTML，我有这个:

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

这将是上述 DIV 的初始样式:

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

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

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

当我使用 Dev Tools 在 Chrome 中测试时，这工作正常。但是，在添加另一个 320px 宽度的媒体查询然后使用开发工具检查之后:

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

...该查询被划掉，就好像它已被覆盖(下面的屏幕截图)..在这种情况下，它被先前的 420px 宽度查询覆盖了。 (请注意，甚至包括 !important 以试图强制定位。)

Here's a screen capture of the media query viewed with dev tools (还显示了先前对 960px 宽度的查询被覆盖 - 这当然是有道理的)

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

那么，我做错了什么，我该怎么做才能解决这个问题？

Answer 1

我认为这就是您想要的:https://jsfiddle.net/pyexm7us/1/

我重新安排了您的媒体查询，将 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;
      }
    }