【问题标题】: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 文章说“除非您使用 notonly 运算符,否则媒体类型是可选的,并且将隐含 all 类型。”
  • 请注意,w3schools 不是官方文档,通常在这里看不到积极的一面。
  • 好的...感谢您的意见。

标签: css media-queries


【解决方案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 (...)
猜你喜欢
  • 2016-06-10
  • 2012-10-25
  • 1970-01-01
  • 2021-08-23
  • 1970-01-01
  • 2020-09-17
  • 2016-11-16
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多