HTML5& CSS - 媒体查询运营商的问题 [英] HTML5 & CSS - media queries operators question

问题描述

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

I was wondering if someone can explain what each of the media queries in the example below mean in simple terms?

以下是示例。

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

推荐答案

分析一下媒体查询意味着，你基本上需要记住这些事情：

To analyze what media queries mean, you basically need to keep these things in mind:

1. 逗号表示或。


2. 媒体查询开头的无表情符号是查询所用媒介的名称（除非该单词为not或only，在这种情况下为 second 字是介入所涉及的媒介。


3. not否定了以下逗号之外的所有内容。


4. parens中的东西是修饰符。


5. 为解析媒体而指定的算法HTML4被严重破坏：它只是从逗号之间的每个部分中提取第一个单词。关键字'onl y'被引入以允许媒体查询作者解决此错误。实现媒体查询的UA只会忽略此关键字。

1. A comma means "or".
2. The unparenthesized thing at the beginning of a media query is the name of the medium the query is for (unless that word is "not" or "only", in which case the second word is the medium involved.
3. "not" negates everything up to the comma that follows.
4. Things in parens are modifiers.
5. The algorithm HTML4 specified for parsing media is horribly broken: it just extracts the first word from each part between commas. The keyword 'only' was introduced to allow media query authors to work around this bug. A UA that implements media queries just ignores this keyword.

所以现在按顺序。

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

Your first media query selects everything that's not a "screen and (color)". So it selects anything that's not a color screen (i.e. non-screens and also monochrome screens).

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

Your second media query selects anything that's a projection medium (whether color or monochrome) or a color screen.

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

Your third media query selects color projection media in UAs that implement media queries. In a UA that implements the HTML 4 algorithm, it's ignored because "only" is not an HTML 4 media specifier. If "only" were left out, then in old UAs it would select all projection media, because it would just extract that first word and ignore the "and (color)" part.

这篇关于HTML5& CSS - 媒体查询运营商的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！