网页前端开发之新的CSS媒体查询范围语法

来源： All文章

发布时间：2023-04-04 16:00:03

　　我们依靠CSS媒体查询来根据目标条件选择和设置元素样式。这种情况可能是各种各样的，但通常分为两个阵营：(1)正在使用的媒体类型，以及(2)浏览器、设备甚至用户环境的特定功能。

　　因此，假设我们想将某些CSS样式应用于打印文档：

　　我们可以在特定视口宽度上应用样式这一事实使CSS媒体查询成为响应式网页设计的核心要素。如果浏览器的视口宽度是某个大小，那么应用一组样式规则，它允许我们设计响应浏览器大小的元素。

　　注意到里面了and吗？这是一个允许我们组合语句的运算符。在该示例中，我们结合了媒体类型为ascreen且其min-width功能设置为30em（或更高）的条件。我们可以做同样的事情来定位一系列视口大小：

　　现在这些样式适用于一个明确的视口宽度范围，而不是单个宽度！

　　但是MediaQueriesLevel4规范引入了一种新语法，用于使用常见的数学比较运算符（例如、和）来定位一系列视口宽度，=这在语法上更有意义，同时编写的代码更少。

　　让我们深入研究它是如何工作的。

最后一个例子很好地说明了我们如何通过使用and运算符组合条件来伪造范围。MediaQueriesLevel4规范的重大变化是我们有新的运算符来比较值而不是组合它们：

600px如果浏览器宽或更大，我们可能会编写一个应用样式的媒体查询：

　　以下是使用比较运算符编写相同内容的外观：

通常，当我们编写CSS媒体查询时，我们会创建所谓的断点设计中断并应用一组样式来修复它的条件。一个设计可以有一堆断点！它们通常基于两个宽度之间的视口：断点开始的位置和断点的结束位置。

　　以下是我们使用and运算符组合两个断点值的方法：

　　and当我们放弃布尔运算符以支持新的范围比较语法时，您开始很好地了解编写媒体查询是多么的短和容易：

　　容易多了，对吧？并且很清楚这个媒体查询在做什么。

在撰写本文时，这种改进的媒体查询语法仍处于早期阶段，目前还没有像结合min-width和max-width.不过，我们越来越近了！

* 文章来源于网络，如有侵权，请联系客服删除处理。