css - CSS 媒体查询运算符

Question

有人可以用非常简单的术语向我解释操作符and,not和only逗号,在 CSS 中的含义和作用吗？

Answer 1

四个运算符实现集合论逻辑。在这种情况下，以下是每个含义：

• ,: 相当于'联合'; 例如@media screen, print匹配屏幕或打印设备

• and: 相当于'交集'; 例如@media screen and (min-device-width: 1920px)匹配分辨率为 1920px 的屏幕设备

• not: 相当于“设置差异”；例如@media not screen and (color)匹配不是屏幕并支持颜色的设备

• only: 相当于“适当的超集”；例如@media only screen and (color)匹配一个只有屏幕并且只支持颜色的设备

参考

• 嵌套媒体查询 | 干草堆

• 媒体查询中的逻辑 | CSS 技巧

• 媒体查询级别 4：评估媒体查询