0

我有以下媒体查询规则：

  1. @media only screen and (max-width: 854px), only screen and (max-device-width: 854px)（对于 <= 854px 的设备）

  2. @media only screen and (min-width: 855px), only screen and (min-device-width: 855px)（适用于 > 854px 的设备）

这很奇怪，但 Chrome（可能是其他浏览器）同时使用此规则（例如当宽度为 800 像素时）（检查屏幕）。怎么了？
stange 媒体查询行为

4

2 回答 2

1

它们回退到相同的规则，因为您正在使用device-width,device-width目标设备的物理宽度的条件，因此如果满足该条件，那么这就是将应用的唯一规则（无论您是否将浏览器调整为任何宽度）。device-width从您的媒体查询中删除这两个条件，这应该可以解决您的问题。

要详细了解 和 之间的区别device-width，width请参阅此链接：http ://www.w3.org/TR/css3-mediaqueries/#media1

于 2012-07-17T16:09:36.297 回答
0

谢谢你，苏维。
我通过更改浏览器的宽度（而不是更改屏幕分辨率）来测试媒体查询规则。因为我的浏览器宽度小于 854px，所以应用了以下规则 - @media only screen and (max-width: 854px)。因为我的屏幕分辨率大于 854px，所以应用了以下规则-only screen and (min-device-width: 855px)

于 2012-07-18T13:57:12.917 回答