“让媒体查询覆盖”；正规的；css

我正试图通过媒体查询来锁定旧iPhone和桌面设备

如果出现“电话”匹配，最好使用一个覆盖当前css的媒体查询：

或者这样写有什么意义

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

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

两人都很好

@介质（最大宽度）将以给定特定分辨率下的每个设备为目标，@media（最小宽度）将以给定特定分辨率以上的每个设备为目标

---

希望这能有所帮助。

正如@Mehul所提到的，两者都可以，一个简单的谷歌搜索可以为你带来数百万的资源。我发现这两篇文章对移动设备web开发很有用，我希望它们有用

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

1） 不支持媒体查询（ahem IE8）的浏览器至少会有回退样式

2） 您的代码稍微小一些，也不那么凌乱

---

此外，如果您对“移动优先”方法感兴趣，您可以将css重新编写为：

body { color: blue; }

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

---

它应该会起作用。你得到了什么错误？@MehulMohan我不是说它不起作用-我只是想知道这两种方法之间是否有任何区别。你认为重写是个问题有什么原因吗？在上面的示例中，结果是相同的-唯一的区别是，通过重写，您节省了一些bytes@Danield我最好奇的是，如果#2可能“错过”任何设备

body { color: blue; }

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