如何结合多种"groups" CSS媒体查询？

Question

在CSS媒体查询中，您可以使用 ,(for" or"或" or"(和 and来匹配媒体查询要求。例如：

@media (min-width: 768px) and (min-resolution: 2dppx) { ... }

但是，如果您想在同一媒体查询中混合and和,怎么办？一个很好的用例是所有浏览器中不支持min-resolution。您必须做这样的事情：

@media
(-webkit-min-device-pixel-ratio: 2),
(min-device-pixel-ratio: 2),
(min-resolution: 192dpi),
(min-resolution: 2dppx) { ... }

在这种情况下，这些要求中的任何一个都需要匹配媒体查询才能生效。

现在，如果我想在媒体查询中需要min-width: 768px，我该怎么做？是否可以将"或"查询组合在一起，并用and分开组？这样的东西：

@media
(
  (-webkit-min-device-pixel-ratio: 2),
  (min-device-pixel-ratio: 2),
  (min-resolution: 192dpi),
  (min-resolution: 2dppx)
)
and
(min-width: 768px) { ... }

上面的语法不起作用，但我认为这可能说明了我想获得的内容。这就像您如何使用(...)括号将SQL AND和OR一起分组。

可以使用CSS执行此操作？

编辑：

这似乎有效，但似乎是语法过度杀伤：

@media
  (-webkit-min-device-pixel-ratio: 2) and (min-width: 768px),
  (min-device-pixel-ratio: 2) and (min-width: 768px),
  (min-resolution: 192dpi) and (min-width: 768px),
  (min-resolution: 2dppx) and (min-width: 768px)
  { ... }

那是唯一的方法吗？

Answer 1

尝试这样使用：

@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) and (min-width: 768px) {...}

,在单个媒体查询列表中被解释为定界符 基本上意味着逗号之间的每个媒体查询是首先 经过评估，然后所有这些都可以一起提供,/ 或最低优先级。

and具有最高优先级