Chrome 104 中范围媒体查询的新语法

了解这种新语法如何简化媒体查询。

媒体查询支持响应式设计，大约 80% 的使用媒体查询的网站使用了能够测试视口最小和最大大小的范围功能。Media Queries Level 4 规范包括用于这些范围查询的新语法。

新语法自 Firefox 63 起已在 Firefox 中可用，并且将从 104 开始在 Chrome 中可用。让我们看看它如何简化您的查询。

针对最小视口宽度的典型媒体查询测试将编写如下：

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

并且，使用 4 级语法的版本：

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

这种语法有可能简化查询，特别是在两个宽度之间进行测试时。在以下示例中，媒体查询测试最小宽度为 400 像素，最大宽度为 600 像素的视口。

@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，您正在测试的功能介于两个值之间。

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

为了在考虑到尚未实现它的浏览器的同时使用新的范围语法，有一个PostCSS 插件可以将新语法重写为样式表中的旧语法。