Question

我知道它非常简单，但我发现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
 ;

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

Answer 1

这是语法的正式EBNF定义。如果您正在寻找易于阅读的示例，请查看chapter 2 of the standard。

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

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

表示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_type和media_feature可以是任意标识符。实际上，它们将是浏览器可识别的标识符，例如print，screen，max-width等。

Answer 2

对于那些可能会被上述语法混淆的人，请查看我的帖子here，了解媒体查询语法的技术性解释。在这里有意义地重新发布太长了：

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

媒体查询语法

2 个答案: