0

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

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

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

而这个媒体查询:

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

有问题的设备的宽度低于385 像素……但它优先考虑 500 像素的媒体查询(我对标准 iPhone 纵向宽度和这个特定的 android 纵向宽度之间的 android 设备有此查询)。

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

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

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

4

2 回答 2

1

他们全部。

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

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

于 2013-09-11T20:28:59.270 回答
0

级联的顺序很重要。在为最大宽度应用各种@media 查询块时,从最宽的开始,然后逐步向下。文件后面的规则将覆盖之前的规则,因此在这种情况下,由于两者都适用,因此您需要正确设置顺序,以便规则正确级联。同样,如果检查min-width,您将从最小的尺寸开始,并添加规则以随着尺寸的增加修改样式。本质上,一个块的规则适用于两者,但与更具体的场景匹配的第二个块将覆盖第一个块。

如果您需要样式完全相互排斥,那么您需要为每个 @media 查询块设置min-width和设置。max-width

于 2013-09-11T20:34:45.690 回答