Html CSS媒体查询相互覆盖

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

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

}

} 背景色仅更改为海军蓝

但当顺序颠倒时：

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


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

---

两个媒体查询都使用各自的宽度。

而不是使用@media screen和（最小宽度：480px）

您可以使用以下选项：

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

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

演示：

---

但这实际上会有与您的代码相同的问题，具体取决于顺序。。上面指向此链接的注释将解释原因。

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

@媒体屏幕和屏幕（最大宽度：632px）

这是说，对于一个屏幕和窗口最大宽度为632px的设备，应用样式。这几乎与上面的相同，只是您指定的是屏幕，而不是最常见的另一个屏幕是打印

@仅介质屏幕和（最大宽度：632px）

---

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

specification，“媒体查询对其包含的选择器没有特殊性，但源顺序仍然很重要。”来源：可能是因为它们都符合条件，而后者被给予优先权，因为如果选择器相等，css会向下移动-ps，您在第二个代码块中为这两个条件编写了480px。演示非常有用。谢谢现在，“仅屏幕”和“仅屏幕”之间有什么区别？这实际上比我能更好地解释它：请链接到规范。请参阅

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