0

我知道它的主题很简单，但我发现 w3.com 上提供的语法相当复杂。任何人都可以解码它吗？理解它重要吗？

这里的语法：

media_query_list
 : S* [media_query [ ',' S* media_query ]* ]?
 ;
media_query
 : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
 | expression [ AND S* expression ]*
 ;
media_type
 : IDENT
 ;
expression
 : '(' S* media_feature S* [ ':' S* expr ]? ')' S*
 ;
media_feature
 : IDENT
 ;

它还指定了它下面的一些标记。任何人都可以请解码它们。

4

2 回答 2

2

这是语法的正式EBNF定义。如果您正在寻找易于阅读的示例，请查看标准的第 2 章。

简而言之，S代表空格字符、IDENT标识符（如foobar2）、*零次或多次重复。让我们详细介绍一下：

media_query_list
 : S* [media_query [ ',' S* media_query ]* ]?
 ;

表示 a media_query_list（即可以在 中的所有内容@media ( here )）由一个或多个 组成media_query，以逗号和可选间距分隔。例如，这些是有效media_query_list的 s：

media_query
 media_query,  media_query,   media_query,media_query

的定义在media_query后面给出，在

media_query
 : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
 | expression [ AND S* expression ]*

手段有|两种形式。任何一个

 media_type
 ONLY media_type
 NOT media_type

（和可选表达式，用 连接AND），或者只是一个表达式，后面跟着可选的多个其他表达式，用 . 连接AND。

表达式定义如下：

expression
 : '(' S* media_feature S* [ ':' S* expr ]? ')' S*

这意味着它总是在括号中，并且仅包含一个media_feature，或一个媒体功能，后跟一个expr. 例如，这些是有效的表达式：

(foo)
(foo: 2px)

在这个定义中，media_typeandmedia_feature可以是任意标识符。在实践中，它们将是浏览器识别的标识符，例如print、screen等max-width。

于 2012-08-22T07:49:45.620 回答
0

对于那些可能对上述语法感到困惑的人，请查看我的帖子，了解我所理解的媒体查询语法的技术性解释。在这里有意义地重新发布太长了：

https://stackoverflow.com/a/23524569/1963978

于 2014-05-07T17:48:04.033 回答