CSS 的媒体查询选择器，screen 和 only screen 有什么区别？

CSS 中的媒体查询选择器主要用于根据不同的媒体类型和条件为页面应用不同的样式规则。在这些选择器中，screen 和 only screen 是两种常见的用法，它们在功能上有细微的区别。

screen

媒体类型 screen 是指针对计算机屏幕、平板电脑、智能手机等屏幕设备的样式。当我们使用媒体查询中的 screen 关键字时，意味着所包含的样式只会在媒体类型是屏幕的设备上应用。例如：

css
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

上面的例子中，背景色 lightblue 只会在设备屏幕宽度小于或等于600像素时应用。

only screen

only screen 关键字的增加是为了防止老旧的浏览器不正确地解释媒体查询。only 关键字用来指定某些样式仅应该被支持媒体查询的浏览器应用，而不是所有设备。在 screen 之前添加 only 关键字，可以防止不支持CSS媒体查询的浏览器将媒体查询内的样式应用于所有媒体类型。

css
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

在这个例子中，使用 only screen 相比单独使用 screen，对于现代浏览器来说并没有区别，它们都会将背景色应用在屏幕宽度小于或等于600像素的屏幕上。但对于那些不支持CSS媒体查询的老旧浏览器，则不会应用这个样式规则。

总结来说，screen 和 only screen 的主要区别在于向后兼容性处理。only 的添加是为了确保旧版浏览器不会将样式规则应用于不支持的媒体类型，而现代浏览器则可以忽略 only 关键字，因为它们已经支持媒体查询。随着现代浏览器的普及，这种差异已经变得不那么重要，但在编写代码时仍需考虑到可能的兼容性问题。

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

shell
@media (max-width:632px)

这表示对于max-width632px 的窗口，您想要应用这些样式。在大多数情况下，在这种尺寸下，您会谈论任何比桌面屏幕更小的东西。

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

这是说对于具有 的设备screen和具有 632px 的窗口max-width应用该样式。这与上面的几乎相同，只是您指定的是与其他可用媒体类型screen相反的 最常见的另一种媒体类型。print

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

这里直接引用 W3C 的一段话来解释这一点。

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

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

以下是该页面示例 9 中显示的引用的链接。

希望这能为媒体查询带来一些启发。

编辑：

请务必查看@hybrids关于如何only真正处理关键字的优秀答案。

以下内容来自Adob​​e 文档。

---

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

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

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

shell
media="only"

由于不存在 only 这样的媒体类型，因此样式表将被忽略。同样，旧的浏览器应该解释

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

作为

shell
media="screen"

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

不幸的是，IE 6-8 未能正确实现该规范。

它不会将样式应用到所有屏幕设备，而是完全忽略样式表。

尽管存在这种行为，但仅当您想对其他不太常见的浏览器隐藏样式时，仍然建议在媒体查询前添加前缀 。

---

所以，使用

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

和

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

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

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

我不完全确定哪些不支持 CSS3 媒体查询的浏览器需要该only版本

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

相对于

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

确保它不会被解释为

shell
media="screen"

对于能够进入设备实验室的人来说，这将是一个很好的测试。

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

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

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

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

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

@hybrid 的答案非常丰富，只是它没有解释 @ashitaka 提到的目的“如果使用移动优先方法会怎样？所以，我们首先使用移动 CSS，然后使用 min-width 来定位更大的网站.我们不应该在这种情况下使用 only 关键字，对吗？”

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

回答 ashitaka 考虑这个例子

shell
<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。因此，它指定的是屏幕而不是其他可用的媒体类型。

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

only screen 这里用于防止不支持具有媒体功能的媒体查询的旧浏览器应用指定的样式。