css - 如果多个与当前设备相关，浏览器如何优先应用哪个@media 查询？

Question

我有一个网站需要根据某些分辨率调整元素定位。

例如，我有这个媒体查询:

@media all and (max-width: 385px)

这个媒体查询:

@media all and (max-width: 500px)

有问题的设备低于 385px 宽...但它优先考虑 500px 媒体查询(我拥有的 android 设备介于标准 iPhone 纵向宽度和这个特定的 androids 纵向宽度之间).

在此处查看我的 chrome 开发工具的屏幕截图:

http://puu.sh/4oToA.png

它正在尝试应用两个 CSS 集，因为它满足每个 CSS 集的标准，但是当我需要它优先于较低的一个时，它会优先考虑较高的一个。

Answer 1

全部。

CSS 定义了特异性规则来确定如果多个选择器匹配同一个元素该怎么做。
(具体来说，最具体的，然后是最底层的属性获胜)

无论选择器是全局的、在同一个媒体查询中还是在不同的媒体查询中，这些规则都适用。