大屏幕的CSS媒体查询覆盖小屏幕的媒体查询

Question

我正在使我的新开发网站具有移动响应能力，但我注意到一些奇怪的行为让我有点抓狂。希望有人能指出我在这里做错了什么。当我以小分辨率测试时，比如 320px 宽度，来自 720px 宽度的规则也被应用，并且由于它们在级联中较低，因此优先考虑。我每次都在较小的查询上使用 !important 声明来抵消这种情况，但我知道这是不正确的。

我的实际 CSS 太大而无法包含，但这是我所看到的示例。如果我在大型平板电脑/小型台式机上有两个并排的 DIV，但希望它们全宽并且在手机上一个位于另一个之上:

@media screen and (max-width:479px){
     div{width:100%}
}
@media screen and (max-width:1159px) and (min-width:980px){
     div{width:49%;float:left}
     div:first-child{margin-right:2%}
}

当我检查 320px 到 479px 宽度时，加载了 980-1159 的规则，我必须使用 !important 声明并将 float 设置为 none 并将 margin 设置为 0。为什么会发生这种情况，我做错了什么？

Answer 1

我假设一切都错了，它是事物的顺序:

代替:

@media screen and (max-width:1159px) and (min-width:980px){

我把它改成了:

@media screen and (min-width:980px) and (max-width:1159px){

它似乎工作正常。调整结果方 block 的大小，看看这是否是您要查找的内容:

https://jsfiddle.net/wyyqLmg6/1/