Question

我正在使我的新开发网站移动响应，但我注意到一些奇怪的行为让我有点疯狂。希望有人可以指出我在这里做错了什么。当我以小分辨率进行测试时，比如320px宽度，720px宽度的规则也正在应用，因为它们在级联中较低，所以优先考虑。我每次都在对较小尺寸的查询进行重要声明时反驳这一点，但我知道这不是正确的。

我的实际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/

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

1 个答案: