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

Question

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

以下是示例。

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

Answer 1

要分析媒体查询的含义，您基本上需要牢记这些事情：

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

所以现在按顺序。

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

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

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