范围媒体查询的新语法

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

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 插件，它会将样式表中的新语法重写为旧语法。