Question

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

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

User

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

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

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

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

当我使用Dev Tools在Chrome中测试时，此功能正常。但是，在为320px宽度添加另一个媒体查询然后使用Dev Tools进行检查后：

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

...该查询被划掉，好像被覆盖一样（下面的屏幕截图）..在这种情况下，它被之前的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%; !important;
       padding-left: 10px;
       padding-right: 10px;
    }
}

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

Answer 1

我认为这就是你想要的：{{3}}

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

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

1 个答案: