范围媒体查询的新语法

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

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 测试宽度不小于 400 像素。新语法可让您更明确地传达意思，并避免查询发生冲突的可能性。

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