css - 媒体查询中的 "screen"和 "only screen"有什么区别？

Question

媒体查询中screen和only screen有什么区别？

<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />

为什么我们需要使用only screen？ screen 本身是否提供了足够的信息以仅 呈现给屏幕？

我见过许多使用以下三种不同方式中的任何一种的响应式网站:

@media screen and (max-width:632px)

@media (max-width:632px)

@media only screen and (max-width:632px)

Answer 1

让我们一个一个地分解你的例子。

@media (max-width:632px)

这个是说对于 max-width 为 632px 的窗口，您要应用这些样式。在大多数情况下，在那个尺寸下，你会谈论任何小于桌面屏幕的东西。

@media screen and (max-width:632px)

这是针对具有 screen 和 max-width 为 632px 的窗口应用样式的设备。除了您指定的是 screen 而不是 other available media types 之外，这几乎与上面的相同。最常见的另一种是 print。

@media only screen and (max-width:632px)

这是直接来自 W3C 的引述来解释这一点。

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

由于不存在“仅”这样的媒体类型，因此旧版浏览器应忽略样式表。

这是 link to that quote该页面上的示例 9 中显示了这一点。

希望这对媒体查询有所启发。

编辑:

一定要查看@hybrids excellent answer关于如何真正处理 only 关键字。