'all' 是否向媒体查询添加任何内容?
Does 'all' add anything to a media query?
这是:
@media all and (min-width: @medium-min) { }
和这个一样吗?:
@media (min-width: @medium-min) { }
我不明白为什么添加 'all' 会比不指定有什么不同。但是我经常看到 'all' 已被添加。有没有需要这个的边缘情况?
你举的这两个例子确实是等价的。 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。
是的,默认设置为全部。
All devices listen to this
可用媒体类型:
all:
所有设备都听这个
braille:
用于盲文触觉反馈设备。
embossed
用于分页盲文打印机。
handheld
用于手持设备(智能手机和平板电脑不
听听这个!)。
print
用于分页 material 和在屏幕上查看的文档
打印预览模式。
projection
用于投影演示,例如投影仪。
scree
n 主要用于彩色电脑屏幕和智能手机。
speech
用于语音合成器..(不管是什么)
tty
用于使用固定间距字符网格的媒体(例如
显示有限的电传打字机、终端或便携式设备
能力)。
tv
用于电视类设备(低分辨率、彩色、
有限滚动屏幕,声音可用)。
参考:http://cssmediaqueries.com/what-are-css-media-queries.html
这是:
@media all and (min-width: @medium-min) { }
和这个一样吗?:
@media (min-width: @medium-min) { }
我不明白为什么添加 'all' 会比不指定有什么不同。但是我经常看到 'all' 已被添加。有没有需要这个的边缘情况?
你举的这两个例子确实是等价的。 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。
是的,默认设置为全部。
All devices listen to this
可用媒体类型:
all:
所有设备都听这个braille:
用于盲文触觉反馈设备。embossed
用于分页盲文打印机。handheld
用于手持设备(智能手机和平板电脑不 听听这个!)。print
用于分页 material 和在屏幕上查看的文档 打印预览模式。projection
用于投影演示,例如投影仪。scree
n 主要用于彩色电脑屏幕和智能手机。speech
用于语音合成器..(不管是什么)tty
用于使用固定间距字符网格的媒体(例如 显示有限的电传打字机、终端或便携式设备 能力)。tv
用于电视类设备(低分辨率、彩色、 有限滚动屏幕,声音可用)。
参考:http://cssmediaqueries.com/what-are-css-media-queries.html