Question

媒体查询中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)

Answer 1

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

@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”也可用于隐藏旧用户代理的样式表。用户代理必须处理以“仅”开头的媒体查询，就好像“仅”关键字不存在一样。

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

以下是该页面上示例9中显示的link to that quote。

希望这能为媒体查询提供一些启示。

编辑：

请务必查看@hybrids excellent answer如何真正处理only关键字。

Answer 2

以下内容来自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)"

as

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"

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

Answer 3

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

@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

Answer 4

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

Answer 5

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

screen此处用于设置媒体查询的屏幕尺寸。例如，显示区域的最大宽度为480像素。因此，它指定的是屏幕，而不是其他可用的媒体类型。

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

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

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

5 个答案: