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

@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 此处用于防止不支持带有媒体功能的媒体查询的旧版浏览器应用指定的样式。

以下是来自Adobe docs的内容。

---

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

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

无法识别媒体查询的浏览器期望使用逗号分隔的媒体类型列表，并且规范指出，它们应在第一个非连字符（不是连字符）之前截断每个值。因此，旧的浏览器应将上述示例解释为：

media="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并且媒体类型为screen ，则两个版本都将加载样式。

我不确定所有不支持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