媒体查询奇怪的行为

Question

我有以下媒体查询规则：

1. @media only screen and (max-width: 854px), only screen and (max-device-width: 854px)（适用于设备＆lt; = 854px）

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

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

Answer 1

他们正在回归到同一规则，因为您正在使用device-width，device-width的条件会定位您设备的物理宽度，因此如果满足该条件，那么这是唯一适用的规则（无论您将浏览器的大小调整到任何宽度）。从媒体查询中删除device-width条件，这可以解决您的问题。

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

Answer 2

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