CSS媒体查询覆盖彼此

Question

为什么在我输入此代码时，第二个媒体查询会覆盖第一个

@media screen and (min-width:660px){
body{
    background:darkgreen;
    }

}

@media screen and (min-width:480px){
body{
    background:navy;
}

}

背景颜色只会变为海军蓝色。

但是当订单被颠倒时：

@media screen and (min-width:480px){
body{
    background:navy;
}


 @media screen and (min-width:660px){
body{
    background:darkgreen;
}

两个媒体查询都以各自的宽度工作。

Answer 1

而不是使用@media屏幕和（min-width：480px）

您可以使用：

@media only screen and (max-width:480px) {
// css here
}

每当某事物低于480px时......它会立即使用该查询。事实证明，这是我在创建响应主题时使用的最佳方法。

DEMO：http://jsfiddle.net/uu78n/

但这实际上会遇到与您的代码相同的问题，具体取决于订单。上面指向此链接的注释http://css-tricks.com/logic-in-media-queries/将解释原因。

Answer 2

“仅屏幕”和“屏幕”之间的区别如下

@media screen and（max-width：632px）

对于具有屏幕的设备和最大宽度为632px的窗口应用该样式。除了指定屏幕而不是最常见的另一个正在打印的other available media types之外，这几乎与上述相同。

@media only screen and（max-width：632px）

关键字“only”也可用于隐藏旧用户代理的样式表。用户代理必须处理以“仅”开头的媒体查询，就好像“仅”关键字不存在一样。