css - 让媒体查询覆盖 "regular"css

Question

我正在尝试使用媒体查询定位旧 iPhone 和桌面设备。

在“电话”匹配的情况下，如果使用一个覆盖当前 css 的媒体查询会更好:

body { color: red; }

@media (max-width:480px) {
    body { color: blue; }
}

或者这样写有什么意义吗:

@media (min-width:480px) {
    body { color: red; }
}

@media (max-width:480px) {
    body { color: blue; }
}

Answer 1

虽然这两种方法都有效，但我会使用第一种，因为使用第一种方法:

1) 不支持媒体查询的浏览器(哎呀 IE8)至少会有后备样式

2) 你的代码稍微小一些，也没有那么乱。

---

此外，对于它的值(value)(尽管与您的问题并不真正相关)，如果您对移动优先方法感兴趣，您可以将 css 重写为:

body { color: blue; }

@media (min-width:480px) {
    body { color: red; }
}