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

Question

这是：

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

和这个一样吗?:

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

我不明白为什么添加 'all' 会比不指定有什么不同。但是我经常看到 'all' 已被添加。有没有需要这个的边缘情况？

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 | NOT]? S* 表达式：

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

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

Answer 2

是的，默认设置为全部。

All devices listen to this

可用媒体类型：

all: 所有设备都听这个
braille: 用于盲文触觉反馈设备。
embossed 用于分页盲文打印机。
handheld 用于手持设备（智能手机和平板电脑不听听这个！）。
print 用于分页 material 和在屏幕上查看的文档打印预览模式。
projection 用于投影演示，例如投影仪。
screen 主要用于彩色电脑屏幕和智能手机。
speech 用于语音合成器..（不管是什么）
tty 用于使用固定间距字符网格的媒体（例如显示有限的电传打字机、终端或便携式设备能力）。
tv 用于电视类设备（低分辨率、彩色、有限滚动屏幕，声音可用）。

参考：http://cssmediaqueries.com/what-are-css-media-queries.html

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

Does 'all' add anything to a media query?

css

media-queries