Question

在CSS Media查询中，您可以使用,（用于“或”）和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) { ... }

上面的语法不起作用，但是我认为它可能说明了我要尝试的内容。就像是如何使用括号AND将SQL 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的优先级最高

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

1 个答案: