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

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

@media (max-width:632px)

这表示您要应用这些样式的 max-width 为 632 像素的窗口。在大多数情况下，在那个尺寸下，你会谈论比桌面屏幕更小的任何东西。

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

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

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

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

关键字“only”也可以用来隐藏旧用户代理的样式表。用户代理必须处理以“only”开头的媒体查询，就好像“only”关键字不存在一样。

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

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

希望这对媒体查询有所帮助。

编辑：

请务必查看 @hybrids excellent answer，了解 only 关键字的实际处理方式。

---

以下来自 Adobe docs。

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

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

不能识别媒体查询的浏览器需要一个以逗号分隔的媒体类型列表，并且规范说他们应该在第一个不是连字符的非字母数字字符之前截断每个值。因此，旧浏览器应将前面的示例解释为：

media="only"

因为没有 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 且媒体类型为屏幕，则两个版本都将加载样式。

我不完全确定哪些不支持 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 提到的目的“如果你使用移动优先方法怎么办？所以，我们首先使用移动 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 用于防止不支持具有媒体功能的媒体查询的旧版浏览器应用指定的样式。

---