如何组合多个 CSS 媒体查询“组”？

Question

在 CSS 媒体查询中，您可以使用,（表示“或”）和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 具有最高优先级