媒体查询中的“屏幕”和“唯一屏幕”有什么区别？
媒体查询中的“屏幕”和“唯一屏幕”有什么区别？
<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本身是否提供了足够的信息来渲染只有屏幕？
我见过很多响应式网站。 一些使用
@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-width为632px的窗口应用风格的设备。 这与上述几乎相同，除了您指定screen ，而不是其他可用的媒体types ，其他最常用的媒体types正在print 。
@media only screen and (max-width:632px)
这里直接引用W3C的一句话来解释这个。
关键字'only'也可以用来隐藏较旧用户代理的样式表。 用户代理必须像“唯一”关键字不存在一样处理以“仅”开始的媒体查询。
由于没有像“only”这样的媒体types，样式表应该被旧的浏览器忽略。
以下是该页面上示例9中显示的引用的链接 。
希望这可以解释媒体查询。
编辑：
请务必查看@hybrids关于如何处理only关键字的绝佳答案 。
以下是来自Adobe文档 。
媒体查询规范还提供only用于关键字的关键字，用于隐藏来自旧浏览器的媒体查询。 not一样，关键字必须在声明的开头。 例如：
media="only screen and (min-width: 401px) and (max-width: 600px)"
无法识别媒体查询的浏览器需要使用逗号分隔的媒体types列表，并且规范说明应在第一个非字母数字字符（不是连字符）之前立即截断每个值。 所以，一个旧的浏览器应该将前面的例子解释为：
media="only"
由于没有这样的媒体types，样式表被忽略。 同样，一个旧的浏览器应该解释
media="screen and (min-width: 401px) and (max-width: 600px)"
如
media="screen"
换句话说，即使不知道媒体查询是什么意思，它也应该将样式规则应用于所有屏幕设备。
不幸的是，IE 6-8没有正确实现规范。
它不是将样式应用于所有屏幕设备，而是完全忽略样式表。
尽pipe存在这种行为，但仍build议仅在您想隐藏其他不常见的浏览器中的样式时，才为媒体查询添加前缀。
所以，使用
media="only screen and (min-width: 401px)"
和
media="screen and (min-width: 401px)"
在IE6-8中会有相同的效果：两者都会阻止这些风格被使用。 但是，他们仍然会被下载。
另外，在支持CSS3媒体查询的浏览器中，如果视口宽度大于401px且媒体types为屏幕，则两个版本都将加载样式。
我不完全确定哪些浏览器不支持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第一，然后使用最小宽度目标较大的网站。在这种情况下，我们不应该使用唯一的关键字，对吧？“
在这里要添加的目的只是为了防止不支持的浏览器使用其他设备的风格，就好像它从“屏幕”开始没有它将采取它的屏幕，因为如果它从“唯一”风格开始将被忽略。
回答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)" />
如果我们不使用“唯一”，它仍然会工作，因为桌面风格也将被用来触发Android风格，但是不必要的开销。 在这种情况下，如果一个浏览器不支持，它将回退到第二个样式表忽略第一个样式表。
