简介:
媒体查询提供了一种强大的方式,可根据设备类型、视口大小、屏幕像素密度或设备方向等因素调整我们的样式。
对于已经熟悉媒体查询的人来说,这篇文章可作为快速指南,揭示一些可能鲜为人知的巧妙技巧。
基本媒体查询:
媒体查询使用 @media at 规则构建,包含媒体类型、零个或多个媒体功能,或媒体类型和媒体功能的组合。允许的媒体类型包括 all、print、screen 和 speech。如果未明确提及,则假定类型为“all”。
在以下简单示例中,默认背景颜色为红色,但视口宽度为 650px 或更小的屏幕设备的背景颜色将变为蓝色:
利用多个媒体特性:
为了满足媒体查询中的特定要求,您可以通过在多个媒体特性之间使用逻辑运算符“and”来指定多个媒体特性。使用“and”时,只有所有特性都评估为 true,查询才会匹配:
使用“或”逻辑运算符:
通过定义多个以逗号分隔的查询,您可以引入逻辑“or”运算符。然后,媒体查询将转换为查询列表,如果任何逗号分隔的查询与条件匹配,则应用。
在下面的示例中,如果设备视口的最小宽度为 2rem 或最大纵横比为 4/1,则媒体查询成立:
使用“not”逻辑运算符:
通过在查询的开头放置“not”,您可以实现相反的效果。当浏览器或设备无法满足特定条件时,这对于应用样式特别有用。一个示例场景是主要指针设备无法悬停在元素上时。
在使用“not”时,指定媒体类型至关重要。此外,需要注意的是,“not”适用于每个单独的查询,而不适用于以逗号分隔的整个查询列表。列表中的每个查询都独立地受“not”条件约束。
“only”逻辑运算符的独占使用:
“only”逻辑运算符具有一个独特的特性——它对旧浏览器隐藏整个查询。简单来说,不理解“only”关键字的旧浏览器将忽略整个媒体查询。否则,“only”关键字本身对查询的行为没有影响。
🌟更多精彩
点击👉这里~~