大屏幕的 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){

而且它似乎工作正常。调整结果方块的大小以查看是否是您要查找的内容：

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