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

1. 旧语法：min-widthandmax-width

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

@media screen and (min-width: 600px) {  .element {    /* La media query se aplica para resoluciones mayores a 600px */  }}

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

@media screen and (max-width: 800px) {  .element {    /* La media query se aplica para resoluciones menores a 600px */  }}

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

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

@media screen and (min-width: 400px) and (max-width: 1000px) {  .element {    /* La media query se aplica para        resoluciones entre 400px y 1000px */  }}

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

2.媒体查询的新范围语法

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

<评估一个值是否小于另一个值。>评估一个值是否大于另一个值。=评估一个值是否等于另一个值。<=评估一个值是否小于或等于另一个值。>=评估一个值是否大于或等于另一个值。

让我们看一些例子：

// sintaxis clásica@media screen and (min-width: 600px) {  .element {    /* La media query se aplica para resoluciones mayores a 600px */  }}// sintaxis de rango@media screen and (width >= 375px) {  .element {    /* La media query se aplica para        resoluciones mayores o iguales a 600px */  }}

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

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

// sintaxis clásica@media screen and (max-width: 800px) {  .element {    /* La media query se aplica para resoluciones menores a 800px */  }}// sintaxis de rango@media screen and (width <= 800px) {  .element {    /* La media query se aplica para        resoluciones menores o iguales a 600px */  }}

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

// sintaxis clásica@media screen and (min-width: 400px) and (max-width: 1000px) {  .element {    /* La media query se aplica para        resoluciones entre 400px y 1000px */  }}//sintaxis de rangos@media screen and (400 <= width <= 1000) {  .element {    /* La media query se aplica para        resoluciones entre 400px y 1000px */  }}

清楚多了！你不觉得吗？

3. HTML<picture>和标签<source>

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

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

4. 我可以使用吗？

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

5. CSS 2023 现状

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

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

不知道这种新 CSS 语法的开发人员数量已经减少，这是一件非常积极的事情。增加了至少听说过此语法但尚未使用过的开发人员数量。而且使用这个新功能的开发者也略有增加，这也是一个积极的因素。

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

6。结论

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