额外的括号导致简单媒体查询失败

Question

我刚刚遇到一件奇怪的事情，想知道这是预期的行为还是某种错误。

我打算编写以下代码，但我缩小了问题范围（见下文）。

@media only screen
 and (
   (-webkit-min-device-pixel-ratio: 1.2),   /* or */
   (min-resolution: 120dpi)
 ) { ... }

此代码有效：

@media only screen
 and (-webkit-min-device-pixel-ratio: 1.2) { ... }

添加额外的外括号，失败:

@media only screen
 and ( (-webkit-min-device-pixel-ratio: 1.2) ) { ... }

目标平台是 Chrome Android 5.1 上的最新版本，但我也愿意听取对其他平台的评论。

Answer 1

这取决于你需要接近什么样的行为。这些规则是否需要 and 或 or

如果你想同时应用媒体查询的规则，你需要使用and逻辑运算符

@media only screen and (-webkit-min-device-pixel-ratio: 1.2)
                   and (min-resolution: 120dpi) 
{ ... }

如果你想应用任何一个媒体查询规则，你需要使用逗号 :

@media only screen and (-webkit-min-device-pixel-ratio: 1.2), 
       only screen and (min-resolution: 120dpi)
{ ... }

Extra brackets cause simple media query to fail