我有以下媒体查询规则：媒体查询奇怪的行为
@media only screen and (max-width: 854px), only screen and (max-device-width: 854px)（用于设备< = 854px）
@media only screen and (min-width: 855px), only screen and (min-device-width: 855px)（用于设备> 854px）
这很奇怪，但Chrome（也可能是其他浏览器）同时使用此规则（例如宽度为800像素时）（检查屏幕）。怎么了？
他们回落到相同的规则，因为你正在使用device-width，为device-width目标设备的物理宽度的条件所以如果条件满足那么这将被应用的唯一规则（不管你调整您的浏览器到任何宽度）。从媒体查询中删除device-width条件，这应该可以解决您的问题。
要了解更多关于device-width和width之间的差异，请参考以下链接：http://www.w3.org/TR/css3-mediaqueries/#media1
谢谢你，苏维。
我通过改变浏览器的宽度（而不是通过改变屏幕分辨率）来测试媒体查询规则。因为我的浏览器宽度小于854px，因此应用了以下规则 - @media only screen and (max-width: 854px)。因为我的屏幕分辨率超过了854px，因此应用了以下规则 - only screen and (min-device-width: 855px)