Does 'all' add anything to a media query?

问题

Is this:

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

The same as this?:

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

I cant see why adding 'all' would make any difference than not specifying. However I often see the 'all' has been added. Is there an edge case that requires this?

回答1:

Yes it does and by default it's set to all.

All devices listen to this

Available media types:

all: All devices listen to this
braille: Used for braille tactile feedback devices.
embossed Used for paged braille printers.
handheld Used for handheld devices (Smartphones and tablets do NOT listen to this!).
print Used for paged material and for documents viewed on screen in print preview mode.
projection Used for projected presentations, for example projectors.
screen Used primarily for color computer screens and smartphones.
speech Used for speech synthesizers.. (Whatever that may be)
tty Used for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities).
tv Used for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Reference: http://cssmediaqueries.com/what-are-css-media-queries.html

回答2:

The two examples that you have are indeed equivalent. The all keyword is implicit in this case. From the 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’.

However...

Is there an edge case that requires this?

Yes: both the only and not keywords require a media type to be specified in order for the media query to be valid. This is where the all keyword is required if you want the media query to apply to all media:

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

You can see this in the grammar. If you look at the media_query production, you'll notice that the part where the media type is omitted does not include the [ONLY | NOT]? S* expression:

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

Whether this is deliberate or not is unclear to me, but implementations honor this completely and so something like not (min-width: 300px) will not work, and it will not validate.

来源：https://stackoverflow.com/questions/28692635/does-all-add-anything-to-a-media-query

标签

css

media-queries