CSS 媒体查询运算符

Question

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

Answer 1

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

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

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

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

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

参考文献

• Nesting media queries | The Haystack

• Logic in Media Queries | CSS-Tricks

• Media Queries Level 4: Evaluating Media Queries