写点东西《CSS 媒体查询》

简介：

媒体查询提供了一种强大的方式，可根据设备类型、视口大小、屏幕像素密度或设备方向等因素调整我们的样式。

对于已经熟悉媒体查询的人来说，这篇文章可作为快速指南，揭示一些可能鲜为人知的巧妙技巧。

基本媒体查询：

媒体查询使用 @media at 规则构建，包含媒体类型、零个或多个媒体功能，或媒体类型和媒体功能的组合。允许的媒体类型包括 all、print、screen 和 speech。如果未明确提及，则假定类型为“all”。

可以同时使用多种媒体类型，每种类型之间用逗号分隔：

在以下简单示例中，默认背景颜色为红色，但视口宽度为 650px 或更小的屏幕设备的背景颜色将变为蓝色：

指定媒体类型、媒体特性或同时指定二者的简单媒体查询示例：

利用多个媒体特性：

为了满足媒体查询中的特定要求，您可以通过在多个媒体特性之间使用逻辑运算符“and”来指定多个媒体特性。使用“and”时，只有所有特性都评估为 true，查询才会匹配：

使用“或”逻辑运算符：

通过定义多个以逗号分隔的查询，您可以引入逻辑“or”运算符。然后，媒体查询将转换为查询列表，如果任何逗号分隔的查询与条件匹配，则应用。

在下面的示例中，如果设备视口的最小宽度为 2rem 或最大纵横比为 4/1，则媒体查询成立：

使用“not”逻辑运算符：

通过在查询的开头放置“not”，您可以实现相反的效果。当浏览器或设备无法满足特定条件时，这对于应用样式特别有用。一个示例场景是主要指针设备无法悬停在元素上时。

在使用“not”时，指定媒体类型至关重要。此外，需要注意的是，“not”适用于每个单独的查询，而不适用于以逗号分隔的整个查询列表。列表中的每个查询都独立地受“not”条件约束。

“only”逻辑运算符的独占使用：

“only”逻辑运算符具有一个独特的特性——它对旧浏览器隐藏整个查询。简单来说，不理解“only”关键字的旧浏览器将忽略整个媒体查询。否则，“only”关键字本身对查询的行为没有影响。

---

🌟更多精彩

点击👉这里~~