没有媒体类型的@media 规则是啥？

Posted 2023-04-14

【中文标题】没有媒体类型的@media 规则是啥？

【英文标题】：What's a @media rule without a media type do?没有媒体类型的@media 规则是什么？

【发布时间】：2016-02-26 18:00:46

【问题描述】：

我继承了这个并且想知道没有“媒体类型”的媒体查询会做什么？

 @media (min-width: 768px) 
   .commentlist-item .commentlist-item 
    padding: 0 0 0 2em;
   

按照 www.w3schools.com/css/css3_mediaqueries.asp 的标准语法

  @media not|only mediatype and (expressions) 
    CSS-Code;

【问题讨论】：

你在哪里看到第二个语法？ W3C 有官方文档，甚至没有任何名为 mediatype - w3.org/TR/css3-mediaqueries

来自 www.w3schools.com/css/css3_mediaqueries.asp。同样在您提供的链接中，我在标有“3.语法”的部分中看到有一种媒体类型。

您链接的 w3schools 文章说“除非您使用 not 或 only 运算符，否则媒体类型是可选的，并且将隐含 all 类型。”

请注意，w3schools 不是官方文档，通常在这里看不到积极的一面。

好的...感谢您的意见。

【参考方案1】：

如果媒体类型未明确给出，则为all。 ~W3C Media Queries

换句话说，没有媒体类型的@media 规则是简写语法，其中隐含了all。

更多来自规范：

2. Media Queries

为适用于所有 媒体类型；关键字all 可以省略（连同 尾随and)。 IE。如果未明确给出媒体类型，则为 all.

示例 5

即这些是相同的：

@media all and (min-width: 500px)  ...  
@media (min-width: 500px)  ... 

这些是：

@media (orientation: portrait)  ... 
@media all and (orientation: portrait)  ... 

...

示例 7

即这些是等价的：

@media all  ... 
@media  ... 

_{来源：https://www.w3.org/TR/css3-mediaqueries/#media0}

【讨论】：

注意，如果使用not，则需要all and。所以你不能做not (...)，你必须做not all and (...)