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

我正在使我的新开发网站移动响应的过程中，但我注意到一些奇怪的行为，这让我有点疯了。希望有人能够指出我在这里做错了什么。当我以小分辨率进行测试时，比如320px宽度，720px宽度的规则也被应用，并且由于它们在级联中较低，因此优先考虑。我一直在用一个小规模查询中的！重要声明来抵消这个，但我知道这是不正确的。CSS媒体查询大屏幕覆盖媒体查询小屏幕

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

当我通过479px宽度检查320像素为980的规则-1159被加载，我必须使用！重要声明以及将float设置为none和margin设置为0.为什么会发生这种情况并且我做错了什么？

来源

2016-01-15 Bestrafung

我假设都是错的是事物的顺序：

的相反：

@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/

来源

2016-01-15 01:09:38

出于某种原因，调整结果窗口对我不起作用。我做了一个短暂的想法，认为这可能是一个问题，但我已经尝试了这两种方式，它仍然加载相同。这是Wordpress模板的一部分，我想知道是否有可能让某个插件或脚本影响媒体查询顺序，但这不应该是正确的？我也试着将较大的分辨率查询移动到顶端，所以小分辨率查询优先，但这只消除了！重要声明的需要，我仍然必须清空或重置不需要的值。 – Bestrafung

嗨，因为预览区域可能不会超过980像素宽，我只是为了测试目的而将其改为480。你能检查它是否适用于你？ https://jsfiddle.net/wyyqLmg6/1/ –

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

回答

相关问题