css – 在@media规则中包含“all”的目的是什么？

2024年1月24日 306次阅读

所以你看到很多代码示例都是这样的

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

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

由于“all”适用于每个设备,人们可以想象它总是1和(1& x)总是等于x所以“all and”应该没有任何区别.

我试过了

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

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

最佳答案 请参阅规格：
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’,’掌上电脑’,’盲文’,’浮雕’,’听觉’已于Media Queries Level 4弃用.

点赞