现在，在 CSS 中，我们有了一种新的语法，可以使用 range 以更直观、更不易混淆的方式编写媒体查询。

我们编写媒体查询的唯一语法是使用关键字min-width和max-width，例如：

或者我们也有相同的语法max-width：

正如您所看到的，对于开发人员来说，min-width和 都max-width有点含糊，我们总是必须考虑何时使用其中之一。

如果我们想用这种语法创建一个范围，我们必须执行如下操作：

虽然最后一个语法更清晰一些，但它很长。

CSS 媒体查询的新范围语法是使用 比较运算符 （在任何编程语言中都很流行）而不是min-width和max-width。

让我们看一些例子：

min-width使用新语法，我们省略了and的使用，max-width并且 use 总是width伴随着上面看到的比较运算符。

我们max-width会有类似的东西：

现在，只需阅读代码，我就清楚何时应用不同的媒体查询。这还不是全部，现在让我们看看如何创建范围：

清楚多了！你不觉得吗？

使用纯 HTML，可以使图像在现代网络上响应。media为此，我们使用标签的属性<source>来创建媒体查询和我们想要显示不同图像的断点。

媒体查询的范围语法也适用于这些标签：

截至本文发布之日，我们在浏览器中的支持率超过 80%。

在每年进行的重要 CSS 调查中，我发现了有关这种新语法的有趣数据。

分析我们现有的数据（从 2022 年到 2023 年）

所有信息都表明，到 2024 年，媒体查询中范围的使用将变得更加广为人知，因此在项目中得到更多使用。

新的媒体查询范围语法生成了更清晰的代码，肉眼可以理解，考虑到与浏览器的兼容性非常高，我建议您熟悉一下它的使用。