css - HTML5 & CSS - 媒体查询操作员问题

Question

我想知道是否有人可以简单地解释下面示例中的每个媒体查询的含义？

这里是例子。

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

Answer 1

要分析媒体查询的含义，您基本上需要牢记以下几点：

1. 逗号表示“或”。
2. 媒体查询开头未加括号的内容是查询所针对的媒体的名称（除非该词是“不”或“仅”，在这种情况下，第二个词是所涉及的媒体。
3. "not" 否定后面的逗号之前的所有内容。
4. 括号中的东西是修饰符。
5. 用于解析媒体的 HTML4 算法被严重破坏：它只是从逗号之间的每个部分中提取第一个单词。引入了关键字“only”以允许媒体查询作者解决此错误。实现媒体查询的 UA 只是忽略这个关键字。

所以现在按顺序。

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

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

您的第三个媒体查询选择实现媒体查询的 UA 中的彩色投影媒体。在实现 HTML 4 算法的 UA 中，它会被忽略，因为“only”不是 HTML 4 媒体说明符。如果省略了“only”，那么在旧的 UA 中它将选择所有投影媒体，因为它只会提取第一个单词并忽略“and (color)”部分。