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

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 这些规则

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

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