0

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

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

上面的语法不起作用，但我认为它可能说明了我想要达到的目的。这有点像您如何使用括号将 SQLAND和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)
  { ... }

这是唯一的方法吗？

4

1 回答 1

0

尝试像这样使用它：

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

,被解释为单个媒体查询列表中的分隔符，基本上意味着首先评估逗号之间的每个媒体查询，然后将它们全部进行或运算，从而为,/ OR 提供最低优先级。

and具有最高优先级

于 2019-07-03T04:19:16.530 回答