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

Question

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

<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)

Answer 1

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

@media (max-width:632px)

这个是说max-width你想要应用这些样式的632px 的窗口.在这种情况下,在大多数情况下,你会谈论比桌面屏幕小的任何东西.

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

这个是说一个设备有一个screen和一个max-width632px 的窗口应用风格.这几乎与上述相同,除了您指定的screen是与其他可用媒体类型相反 的最常见的其他媒体类型print.

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

以下是W3C直接引用的解释.

关键字"仅"也可用于隐藏旧用户代理的样式表.用户代理必须处理以"仅"开头的媒体查询,就好像"仅"关键字不存在一样.

由于没有"仅"这样的媒体类型,旧版浏览器应该忽略样式表.

这是该页面上示例9中显示的引用的链接.

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

编辑:

请务必查看关于如何真正处理关键字的@hybrids优秀答案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)"

如

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