范围媒体查询的新语法

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

Rachel Andrew

在使用媒体查询的网站中，有大约 80% 使用支持媒体查询的自适应设计和支持测试视口最小尺寸和最大尺寸的范围特征。媒体查询第 4 级规范包含针对这些范围查询的改进语法。

浏览器支持

以下示例展示了它如何简化查询。

一个典型的媒体查询，用于测试视口的最小宽度，其编写方式如下：

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

此语法有望简化查询，尤其是在测试介于两个宽度之间的视口时。在以下示例中，媒体查询测试最小宽度为 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，介于两个值之间。

除了简化媒体查询，新语法还具有准确性高这一优势。min- 和 max- 查询包含指定值，例如 min-width: 400px 会测试 400px 或更大宽度。借助新语法，您可以进一步明确自己的意思，避免查询发生冲突的可能性。

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