CSS 媒体查询中的逻辑（If / Else / And / Or / Not）

以防您像我一样，经常对 CSS 媒体查询中的逻辑感到困惑。

如果

这就是媒体查询的含义：逻辑上的 if 语句。“如果”浏览器满足这些条件，则使用其中的 CSS。

/* IF the viewport is 550px or smaller, do this */
@media (max-width: 550px) {
  html { background: hsl(0 0% 0% / 0.5); }
}

媒体查询级别 4 允许使用类似这样的比较语法，但浏览器支持目前要低得多。

@media (width <= 30em) {
  html { background: rgb(0 0 0 / 0.5); }
}

并且

关键字 and。

/* IF the viewport is 550px or smaller, do this */
@media (min-width: 600px) and (max-width: 800px) {
  html { background: red; }
}

媒体查询级别 4 语法在这里非常出色。

@media (600px <= width <= 800px) {
  html { background: red; }
}

或

用逗号分隔。

@media (max-width: 600px), (min-width: 800px) {
  html { background: red; }
}

从技术上讲，这些被视为两个独立的媒体查询，但实际上是 or。

不是

使用关键字 not 反转逻辑。

@media not all and (max-width: 600px) {
  html { background: red; }
}

仅仅使用 not (max-width: 600px) 对我来说似乎不起作用，因此上面采用了稍微奇怪的语法。也许有人可以向我解释一下。请注意，not 仅适用于当前媒体查询，因此如果用逗号分隔，它只会影响其所在的媒体查询。另外请注意，not 会反转整个媒体查询的逻辑，而不是其各个部分。not x and y = not (x and y) ≠ (not x) and y。

独占

要确保一次只生效一个媒体查询，请确保数字（或其他任何内容）能够实现这一点。以这种方式，您可能更容易在脑海中管理它们。

@media (max-width: 400px) {
  html { background: red; }
}
@media (min-width: 401px) and (max-width: 800px) {
  html { background: green; }
}
@media (min-width: 801px) {
  html { background: blue; }
}

从逻辑上讲，这有点像 switch 语句，只是没有简单的方法来实现类似于 default 的“如果这些都不匹配，则执行此操作”。

这是未来的 CSS 功能，但@when 语法将有助于改进这一点。

@when media(min-width: 600px) {
  /* ... */ 
}
@else {
  /* ... */ 
}

覆盖

没有任何东西可以阻止多个媒体查询同时为真。在某些情况下，使用它可能比将它们全部设置为独占更有效。

@media (min-width: 400px) {
  html { background: red; }
}
@media (min-width: 600px) {
  html { background: green; }
}
@media (min-width: 800px) {
  html { background: blue; }
}

媒体查询不会为其包含的选择器添加任何特殊性，但源顺序仍然很重要。以上示例将起作用，因为它们的顺序正确。交换该顺序，在浏览器窗口宽度大于 800 像素时，背景将变为红色，这可能违反直觉。

移动优先

您的小型屏幕样式位于常规屏幕 CSS 中，然后随着屏幕变大，您会覆盖需要覆盖的部分。因此，一般来说，使用 min-width 媒体查询。

html { background: red; }

@media (min-width: 600px) {
  html { background: green; }
}

桌面优先

您的大型屏幕样式位于常规屏幕 CSS 中，然后随着屏幕变小，您会覆盖需要覆盖的部分。因此，一般来说，使用 max-width 媒体查询。

html { background: red; }

@media (max-width: 600px) {
  html { background: green; }
}

变得古怪

您可以根据需要使用它来实现复杂的效果。

@media 
  only screen and (min-width: 100px),
  not all and (min-width: 100px),
  not print and (min-height: 100px),
  (color),
  (min-height: 100px) and (max-height: 1000px),
  handheld and (orientation: landscape)
{
  html { background: red; }
}

注意：only 关键字的目的是防止不支持媒体查询的浏览器加载样式表或使用样式。我不确定这在过去或现在是否有用。