新的 CSS 媒体查询范围语法

我们依靠 CSS 媒体查询 用于根据目标条件选择和样式化元素。 这种情况可能是各种各样的，但通常分为两个阵营：(1) 正在使用的媒体类型，以及 (2) 浏览器、设备甚至用户环境的特定功能。

因此，假设我们想将某些 CSS 样式应用于打印文档：

@media print {
  .element {
    /* Style away! */
  }
}

自 Ethan Marcotte 以来，我们可以在特定视口宽度上应用样式这一事实使 CSS 媒体查询成为响应式网页设计的核心要素 创造了这个词. 如果浏览器的视口宽度是某个大小，那么应用一组样式规则，它允许我们设计响应浏览器大小的元素。

/* When the viewport width is at least 30em... */
@media screen and (min-width: 30em) {
  .element {
    /* Style away! */
  }
}

请注意 and 在那里？ 这是一个允许我们组合语句的运算符。 在该示例中，我们结合了媒体类型为 screen 它是 min-width 功能设置为 30em （或以上）。 我们可以做同样的事情来定位一系列视口大小：

/* When the viewport width is between 30em - 80em */
@media screen and (min-width: 30em) and (max-width: 80em) {
  .element {
    /* Style away! */
  }
}

现在这些样式适用于一个明确的视口宽度范围，而不是单个宽度！

但是 Media Queries Level 4 规范引入了一种新语法，用于使用常见的数学比较运算符来定位一系列视口宽度——比如 <, >及 = — 在编写更少代码的同时在语法上更有意义。

让我们深入研究它是如何工作的。

新的比较运算符

最后一个例子很好地说明了我们如何通过使用 and 操作员。 Media Queries Level 4 规范的重大变化是我们有新的运算符来比较值而不是组合它们：

• < 评估一个值是否是 少于 另一个价值
• > 评估一个值是否是 比...更棒 另一个价值
• = 评估一个值是否是 等于 到另一个值
• <= 评估一个值是否是 小于或等于 to 另一个值
• >= 评估一个值是否是 大于或等于 to 另一个值

如果浏览器是，我们可能会编写一个应用样式的媒体查询 600px 宽或更大：

@media (min-width: 600px) {
  .element {
    /* Style away! */
  }
}

以下是使用比较运算符编写相同内容的外观：

@media (width >= 600px) {
  .element {
    /* Style away! */
  }
}

定位一系列视口宽度

通常，当我们编写 CSS 媒体查询时，我们会创建所谓的 断点 — 设计“中断”并应用一组样式来修复它的情况。 一个设计可以有一堆断点！ 它们通常基于两个宽度之间的视口：断点开始的位置和断点的结束位置。

下面是我们如何使用 and 运算符组合两个断点值：

/* When the browser is between 400px - 1000px */
@media (min-width: 400px) and (max-width: 1000px) {
  /* etc. */
}

当我们放弃布尔值时，您开始很好地了解编写媒体查询是多么的短和容易 and 运算符支持新的范围比较语法：

@media (400px <= width <= 1000px) {
  /* etc. */
}

容易多了，对吧？ 并且很清楚这个媒体查询在做什么。

浏览器支持

这种改进的媒体查询语法在撰写本文时仍处于早期阶段，目前还没有像结合 min-width 和 max-width. 不过，我们越来越近了！ Safari 是目前唯一的主要支持者，但 有一张公开的票 你可以遵循。

让我们看一个例子

这是一个非常适合大屏幕的布局，比如桌面：

此布局具有所有断点通用的基本样式。 但是随着屏幕变窄，我们开始应用样式，这些样式在不同的较小断点处有条件地应用，这些断点非常适合平板电脑一直到手机：

要查看发生了什么，这是布局在两个较小断点之间的响应方式。 隐藏的导航列表显示以及 title ，在 main 增加 font-size.

当视口的更改从匹配一种媒体的条件变为另一种时，就会触发该更改：

/* Base styles (any screen size) */
header {
  display: flex;
  justify-content: center;
}

header ul {
  display: none;
}

.title p {
  font-size: 3.75rem;
}

/* When the media type is a screen with a width greater or equal to 768px */
@media screen and (width >= 768px) {
  header {
    justify-content: space-between;
  }

  header ul {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
  }

  .title p {
    font-size: 5.75rem;
  }
}

我们已经结合了一些我们已经涵盖的概念！ 我们的目标设备具有 screen 媒体类型，使用新的媒体特征范围语法评估视口宽度是否大于或等于特定值，并将这两个条件与 and 运营商。

好的，这对下面的移动设备非常有用 768px 对于其他设备等于或大于 768px. 但是那个桌面布局呢……我们如何到达那里？

就布局而言：

• main 元素变成一个 12 列的网格。
• 图像上显示一个按钮。
• 的大小 .title 元素的字体增加并与图像重叠。

假设我们已经完成了功课并确定了这些更改应该发生的确切位置，我们可以在视口匹配时应用这些样式 width 该断点的条件。 我们要说断点在 1000px:

/* When the media type is a screen with a width greater or equal to 1000px  */
@media screen and (width >= 1000px) {
  /* Becomes a 12-column grid */
  main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 250px;
  }

  /* Places the .title on the grid */
  .title {
    grid-row: 1;
  }

  /* Bumps up the font-size */
  .title p {
    font-size: 7.75rem;
  }

  /* Places .images on the grid */
  .images {
    grid-row: 1 / span 2;
    align-self: end;
    position: relative;
  }

  /* Displays the button */
  .images .button {
    display: block;
    position: absolute;
    inset-block-end: 5rem;
    inset-inline-end: -1rem;
  }
}

玩一玩：

为什么新语法更容易理解

底线：更容易区分比较运算符（例如 width >= 320px) 而不是说出两者之间的区别 min-width 和 max-width 使用 and 操作员。 通过消除之间的细微差别 min- 和 max-, 我们有一个 width 使用的参数和操作员告诉我们其余的。

除了这些语法的视觉差异之外，它们还做了一些稍微不同的事情。 使用 min- 和 max- 相当于使用数学比较运算符：

• max-width 相当于 <= 运算符（例如 (max-width: 320px) 是相同的 (width <= 320px)).
• min-width 相当于 >= 运算符（例如 (min-width: 320px) 是相同的 (width >= 320px)).

请注意，两者都不等同于 > or < 运营商。

让我们直接从 Media Queries Level 4 规范中提取一个示例，其中我们根据断点定义不同的样式 320px 在视口宽度中使用 min-width 和 max-width:

@media (max-width: 320px) { /* styles for viewports = 320px */ }

当视口宽度等于时，两个媒体查询都匹配一个条件 320px. 这不是我们想要的。 我们想要 或 这些条件之一，而不是同时两个。 为了避免这种隐式变化，我们可能会在查询中添加一个像素 min-width:

@media (max-width: 320px){ /* styles for viewports = 321px */ }

虽然这确保了当视口宽度为 320px, 任何视口宽度介于 320px 和 321px 将导致一个超小区域，其中没有应用任何查询中的样式——一种奇怪的“无样式内容闪现”的情况。

一种解决方案是将第二个比较比例值（小数点后的数字）增加到 320.01px:

@media (max-width: 320px) { /* styles for viewports = 320.01px */ }

但这变得愚蠢和过于复杂。 这就是为什么新媒体特征范围语法是更合适的方法的原因：

@media (width <= 320px) { /* styles for viewports  320px) { /* styles for viewports > 320px */ }

结束了

唷，我们在 CSS 媒体查询中针对视口宽度范围的新语法涵盖了很多基础。 既然 Media Queries Level 4 规范已经引入了语法并且它已经被 Firefox 和 Chromium 浏览器所采用，我们正在接近能够使用新的比较运算符并将它们与除此之外的其他范围媒体功能相结合 width， 喜欢 height 和 aspect-ratio

这只是第 4 级规范引入的较新功能之一，此外还有一个 我们可以根据用户偏好进行的一堆查询. 它并没有就此结束！ 查看 CSS 媒体查询完整指南 偷看 媒体查询级别 5 中可能包含的内容.