为什么这些媒体查询不会相互覆盖？

Question

我在样式表中设置了以下媒体查询，有人告诉我为什么底部查询没有覆盖第一个查询吗？

@media screen only and (max-width:992px) {
  .some-element {float:left;}
}

@media screen only and (max-width:768px) {
  .some-element {float:none;}
}

Answer 1

尝试 @media screen 而不是 @media screen only。底部查询确实覆盖了顶部查询。

@media screen and (max-width:992px) {
    .some-element {
        float:left;
        background-color: #f00;
    }
}
@media screen and (max-width:768px) {
    .some-element {
        /** See how the background-color property is overriden */
        background-color: #000;
        color: #fff;
    }
}

<div class="some-element">Hi. I am floating.</div>

<h1>I am a block element</h1>

Answer 2

您以错误的顺序编写了媒体查询，唯一的（或 'not'）应该紧跟在“@media”之后。像这样：

@media only screen and (max-width:992px) {
  .some-element {float:left;}
}

@media only screen and (max-width:768px) {
  .some-element {float:none;}
}

为什么这些媒体查询不会相互覆盖？

Why are these media queries not overriding each other?

css

responsive-design

media-queries