媒体查询中的“屏幕”和“仅屏幕”有什么区别？

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)

让我们一一分解您的示例。

@media (max-width:632px)

这max-width就是说您要应用这些样式的632px 的窗口。在这种情况下，大多数情况下，您所谈论的都是小于桌面屏幕的任何东西。

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

这是针对具有screen和max-width632px 窗口的设备应用样式的说法。这与上面的几乎相同，除了您要指定的screen是与其他 最常用的其他媒体类型不同之外print。

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

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

关键字“仅”还可以用于向较旧的用户代理隐藏样式表。用户代理必须处理以'only'开头的媒体查询，就像没有'only'关键字一样。

由于没有“仅”这样的媒体类型，因此较旧的浏览器应忽略样式表。

这是该页面上的示例9中显示的引用的链接。

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

编辑：

请务必查看@hybrids出色的答案，了解如何only真正处理该关键字。

以下是来自Adobe docs的内容。

媒体查询规范还提供了关键字only，旨在隐藏旧版浏览器中的媒体查询。像一样not，关键字必须位于声明的开头。例如：

media="only screen and (min-width: 401px) and (max-width: 600px)"

无法识别媒体查询的浏览器期望使用逗号分隔的媒体类型列表，并且规范指出，它们应在第一个非数字字符（连字符）之前立即截断每个值。因此，旧的浏览器应将上述示例解释为：

media="only"

因为没有仅这种媒体类型，所以样式表将被忽略。同样，旧的浏览器应解释

media="screen and (min-width: 401px) and (max-width: 600px)"

如

media="screen"

换句话说，即使它不知道媒体查询的含义，也应将样式规则应用于所有屏幕设备。

不幸的是，IE 6-8无法正确实施该规范。

它没有将样式应用于所有屏幕设备，而是完全忽略了样式表。

尽管有这种行为，但仍建议仅在要从其他不那么常见的浏览器中隐藏样式时，才为媒体查询添加前缀。

因此，使用

media="only screen and (min-width: 401px)"

和

media="screen and (min-width: 401px)"

在IE6-8中将具有相同的效果：两者都将阻止使用这些样式。但是，它们仍将下载。

另外，在支持CSS3媒体查询的浏览器中，如果视口宽度大于401px并且媒体类型为screen ，则两个版本都将加载样式。

我不确定所有不支持CSS3媒体查询的浏览器是否需要该only版本

media="only screen and (min-width: 401px)" 

相对于

media="screen and (min-width: 401px)"

确保它不会被解释为

media="screen"

对于可以访问设备实验室的人来说，这将是一个很好的测试。

要为许多具有较小屏幕的智能手机设置样式，您可以编写：

@media screen and (max-width:480px) { … } 

要阻止旧版浏览器查看iPhone或Android手机样式表，您可以编写：

@media only screen and (max-width: 480px;) { … } 

阅读本文以了解更多信息http://webdesign.about.com/od/css3/a/css3-media-queries.htm

@hybrid的回答很有用，只是它没有解释@ashitaka提到的目的“如果使用Mobile First方法会怎样？因此，我们首先使用移动CSS，然后使用min-width定位较大的网站。我们不应该在这种情况下使用唯一的关键字，对吧？

想要在此处添加，其目的只是为了防止不支持的浏览器使用其他设备样式，就像它从“屏幕”开始一样，而不是将其用于屏幕，而好像它是从“仅”样式开始一样。

回答ashitaka的例子

<link rel="stylesheet" type="text/css" 
  href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" 
  href="desktop.css" media="screen and (min-width: 481px)" />

如果我们不使用“ only”，它仍然可以使用，因为桌面样式也将用于打击Android样式，但会产生不必要的开销。在这种情况下，如果浏览器不支持，它将回退到第二个样式表，而忽略第一个样式表。

@media screen and (max-width:480px) { … } 

screen这是设置媒体查询的屏幕尺寸。例如，显示区域的最大宽度为480px。因此，它指定的是屏幕，而不是其他可用的媒体类型。

@media only screen and (max-width: 480px;) { … } 

only screen 此处用于防止不支持带有媒体功能的媒体查询的旧版浏览器应用指定的样式。