css - 在@media 规则中包含 "all"的目的是什么？

Question

所以你看到很多代码示例都在做类似的事情

@media all and (max-width:640px) {
    div {
        background-color:red;
    }
}

现在 afaik，关键字“all”和“screen”以及其他一些用于选择适用的设备类型，并且该行只是应该提供 bool 输出。

由于“全部”适用于所有设备，因此可以想象它始终为 1 且 (1 && x) 始终等于 x，因此“全部和”应该没有任何区别。

我试过了

@media (max-width:640px) {
    div {
        background-color:red;
    }
}

至少我的浏览器同意。还有什么我应该知道的吗？

Answer 1

查看规范:https://www.w3.org/TR/css3-mediaqueries/

The ‘print’ and ‘screen’ media types are defined in HTML4. The complete list of media types in HTML4 is: ‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’. CSS2 defines the same list, deprecates ‘aural’ and adds ‘embossed’ and ‘speech’. Also, ‘all’ is used to indicate that the style sheet applies to all media types.

...

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’.

/* I.e. these are identical: */

@media all and (min-width:500px) { … }
@media (min-width:500px) { … }

/* As are these: */

@media (orientation: portrait) { … }
@media all and (orientation: portrait) { … }

---

此外，以下媒体类型:'tty'、'tv'、'projection'、'handheld'、'braille'、'embossed'、'aural' 已在 Media Queries Level 4 中弃用。 .