HTML5＆CSS - 媒体查询运营商问题

Question

我想知道是否有人可以解释下面例子中的每个媒体查询是什么意思？

这里是例子。

media="not screen and (color)" 
media="projection, screen and (color)" 
media="only projection and (color)" 

Answer 1

来分析一下媒体查询的意思是，你基本上需要把这些事情记：

1. 逗号手段“或”。
2. 在媒体查询开始时未被切割的东西是查询媒介的名称（除非该字是“不”或“唯一”，在这种情况下第二个字是涉及的媒介。
3. “而不是”否定一切都交给后面的逗号
4. 事情在括号是修饰
5. 解析媒体是可怕的坏指定的算法HTML4：。它只是提取从逗号之间的每个部分的第一个字的。引入关键字'only'以允许媒体查询作者解决此bug。实现媒体查询的UA忽略此关键字。

所以现在就按顺序。

您的第一个媒体查询将选择不是“屏幕和（颜色）”的所有内容。所以它选择的不是彩色屏幕（即非屏幕和​​单色屏幕）。

您的第二个媒体查询选择任何投影媒体（无论是彩色还是单色）还是彩色屏幕。

您的第三个媒体查询选择实现媒体查询的UA中的彩色投影媒体。在实现HTML 4算法的UA中，它被忽略，因为“only”不是HTML 4媒体说明符。如果“仅”被遗漏了，那么在旧的UA中它将选择所有的投影媒体，因为它将只提取第一个字并忽略“和（颜色）”部分。