让媒体查询覆盖＆＃34;常规＆＃34; CSS

Question

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

如果更好地使用一个媒体查询来覆盖当前的css，如果是＆＃34;电话＆＃34;匹配：

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

正如@Mehul所提到的，两者都没问题，一个简单的谷歌搜索为您带来了数百万的资源。我发现这两篇文章对于移动设备网络开发iPhone CSS—tips for building iPhone websites和width versus device-width很有用，我希望它们很有用。

Answer 2

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

1）不支持媒体查询的浏览器（ahem IE8）至少会有后备风格

2）你的代码稍微小一点，不那么杂乱。

<小时/> 另外，如果您对移动优先方法感兴趣，可以将其重新编写为：

body { color: blue; }

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

Answer 3

两个都没关系。

@media（max-width）将在给定的特定分辨率下定位每个设备，@ media（min-width）将针对特定分辨率以上的每个设备进行定位。

希望有所帮助。