css - 媒体查询语法

Question

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

Syntax here :

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(此处)中的所有内容)由一个或多个media_query组成，分隔通过逗号和可选间距。例如，这些是有效的 media_query_list:

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 等。