css - 'all' 是否向媒体查询添加任何内容？

Question

这是:

@media all and (min-width: @medium-min) { }

和这个一样吗？

@media (min-width: @medium-min) { }

我不明白为什么添加“全部”会比不指定有什么不同。但是我经常看到添加了“全部”。有没有需要这个的边缘情况？

Answer 1

你的两个例子确实是等价的。 all 关键字在这种情况下是隐含的。来自spec :

A shorthand syntax is offered for media queries that apply to all media types; the keyword ‘all’ can be left out (along with the trailing ‘and’). I.e. if the media type is not explicitly given it is ‘all’.

然而...

Is there an edge case that requires this?

是的:only 和not 关键字都需要指定媒体类型才能使媒体查询有效。如果您希望媒体查询应用于所有媒体，这就是需要 all 关键字的地方:

@media only all and (min-width: @medium-min) { }
@media not all and (min-width: @medium-min) { }

你可以在 grammar 中看到这个.如果您查看 media_query 生成，您会注意到省略媒体类型的部分不包括 [ONLY |不是]？ S* 表达式:

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

我不清楚这是否是故意的，但实现完全尊重这一点，所以像 not (min-width: 300px) 这样的东西不会起作用，它不会 validate .