Question

我在样式表中设置了以下媒体查询，cna任何人都告诉我为什么底层查询不会覆盖第一个查询？

@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。底部查询会覆盖顶部查询。

＆＃13;

@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;
    }
}

＆＃13;

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

＆＃13;

Answer 2

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

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

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

为什么这些媒体查询不会相互压倒？

2 个答案: