媒体查询中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)
【问题讨论】：
标签： css media-queries
让我们一一分解你的例子。
@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 的引用来解释这一点。
关键字“only”也可用于隐藏旧用户代理的样式表。用户代理必须处理以“only”开头的媒体查询，就好像“only”关键字不存在一样。
由于没有“only”这样的媒体类型，旧浏览器应该忽略样式表。
这是该页面上示例 9 中显示的link to that quote。
希望这对媒体查询有所帮助。
编辑：
请务必查看@hybrids excellent answer，了解only 关键字的实际处理方式。
【讨论】：
only 关键字将隐藏旧浏览器的样式表，请参阅下面@hybrid 的答案。他解释得很好。
link 元素的 media 属性。
screen 的任何其他内容，例如其他媒体类型中列出的任何内容。
以下来自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"
对于可以访问设备实验室的人来说，这将是一个很好的测试。
【讨论】：
only screen 很有用，实际上是避免页面损坏的唯一方法，因为 CSS3 支持悲惨。
要为许多小屏幕智能手机设计样式，您可以这样写：
@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
【讨论】：
only 关键字，对吧？
@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 此处用于防止不支持具有媒体功能的媒体查询的旧浏览器应用指定的样式。
【讨论】：