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

Question

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

这是一个例子.

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

Answer 1

要分析媒体查询的含义,您基本上需要记住以下事项:

1. 逗号表示"或".
2. 媒体查询开头的无关联事物是查询所用媒介的名称(除非该词是"非"或"仅",在这种情况下,第二个词是涉及的媒介.
3. "不"否定了一切,直到后面的逗号.
4. parens中的东西是修饰语.
5. 为解析媒体而指定的算法HTML4被严重破坏:它只是从逗号之间的每个部分中提取第一个单词.引入了关键字"only"以允许媒体查询作者解决此错误.实现媒体查询的UA只会忽略此关键字.

所以现在按顺序排列.

您的第一个媒体查询选择了不是"屏幕和(颜色)"的所有内容.所以它选择任何不是彩色屏幕的东西(即非屏幕和​​单色屏幕).

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

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