媒体查询用于创建响应式网页设计。在媒体查询中，屏幕和唯一屏幕都被使用。

screen:设置媒体查询的屏幕大小。屏幕大小可以通过max-width和min-width来设置。

Screen用于许多屏幕较小的智能手机的样式，你可以这样写:

@media screen and (max-width:630px){ ... }

在上面的代码中，screen是说对于一个最大宽度为630px的屏幕和窗口大小，你想应用所述的样式。

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

为了阻止旧的浏览器看到样式表，你可以这样写:

@media only screen and (max-width:630px){ ... }

关键字' only '将对旧的用户代理隐藏样式表。

媒体查询用于创建响应式网页设计。在媒体查询中，屏幕和唯一屏幕都被使用。

screen:设置媒体查询的屏幕大小。屏幕大小可以通过max-width和min-width来设置。

Screen用于许多屏幕较小的智能手机的样式，你可以这样写:

@media screen and (max-width:630px){ ... }

在上面的代码中，screen是说对于一个最大宽度为630px的屏幕和窗口大小，你想应用所述的样式。

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

为了阻止旧的浏览器看到样式表，你可以这样写:

@media only screen and (max-width:630px){ ... }

关键字' only '将对旧的用户代理隐藏样式表。

以下内容来自Adobe文档。

---

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

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

不识别媒体查询的浏览器期望一个以逗号分隔的媒体类型列表，规范说它们应该在第一个非字母数字字符(非连字符)之前立即截断每个值。所以，旧的浏览器应该这样解释上面的例子:

media="only"

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

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

as

media="screen"

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

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

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

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

---

因此,使用

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

and

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

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

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

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

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

而不是

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

确保它不会被解释为

media="screen"

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

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

@media (max-width:632px)

这个是说对于一个最大宽度为632px的窗口，你想要应用这些样式。在这种尺寸下，大多数情况下你会说任何比桌面屏幕小的东西。

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

这个是说对于一个带有屏幕的设备和一个max-width为632px的窗口应用样式。这与上面的几乎相同，除了你指定的是屏幕，而不是其他可用的媒体类型，最常见的另一种是打印。

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

下面是W3C对这一点的直接解释。

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

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

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

希望这能对媒体的质疑有所启发。

编辑:

一定要看看@hybrids关于如何处理唯一关键字的出色回答。

要为许多屏幕较小的智能手机设计样式，你可以这样写:

@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，然后使用最小宽度来定位更大的网站。我们不应该在这种情况下使用唯一的关键字，对吧?”

想在这里补充一下，目的只是为了防止非支持的浏览器使用其他设备样式，如果它从“屏幕”开始，没有它将把它作为一个屏幕，而如果它从“only”样式开始，将被忽略。

回答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风格，但有不必要的开销。在这种情况下，如果浏览器不支持，它将回退到第二个样式表，忽略第一个样式表。