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

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) ) { ... }

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

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)
{ ... }