range media query 的新语法

了解此新语法如何简化 media query。

Rachel Andrew

Media Queries 实现了自适应设计，而启用测试视口最小和最大尺寸的 range 功能被使用 media query 的网站大约 80% 的网站使用。Media Queries Level 4 规范包含针对这些 range query 的改进语法。

浏览器支持

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 102.
  • Safari: 16.4.

来源

以下示例展示了它如何简化您的 query。

测试最小视口宽度的典型 media query 将编写如下

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

新语法允许使用比较运算符

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

测试最大宽度

@media (max-width: 30em) {
  // Styles for viewports with a width of 30em or less.
}

以及使用 level 4 语法的版本

@media (width <= 30em) {
  // Styles for viewports with a width of 30em or less.
}

此语法有可能简化 query，尤其是在测试两个宽度之间时。在以下示例中，media query 测试视口的最小宽度为 400px，最大宽度为 600px。

@media (min-width: 400px) and (max-width: 600px) {
  // Styles for viewports between 400px and 600px.
}

这可以在新语法中改写为

@media (400px <= width <= 600px )  {
  // Styles for viewports between 400px and 600px.
}

您正在测试的功能（在本例中为 width）位于两个值之间。

除了使 media query 不那么冗长之外，新语法还具有准确性的优势。min- 和 max- query 包含指定的值，例如 min-width: 400px 测试宽度是否为 400px 或更大。新语法使您可以更明确地表达您的意思，并避免潜在的 query 冲突。

要在使用新 range 语法的同时兼顾尚未实现该语法的浏览器，可以使用 PostCSS 插件，该插件会将样式表中的新语法重写为旧语法。