在媒体查询中,屏幕和只有屏幕有什么区别?
<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" />
为什么要求我们只使用屏幕?屏幕本身没有提供足够的信息,只呈现给屏幕吗?
我见过许多响应式网站使用以下三种不同的方式:
@media screen and (max-width:632px)
@media (max-width:632px)
@media only screen and (max-width:632px)
媒体查询用于创建响应式网页设计。在媒体查询中,屏幕和唯一屏幕都被使用。
screen:设置媒体查询的屏幕大小。屏幕大小可以通过max-width和min-width来设置。
Screen用于许多屏幕较小的智能手机的样式,你可以这样写:
@media screen and (max-width:630px){ ... }
在上面的代码中,screen是说对于一个最大宽度为630px的屏幕和窗口大小,你想应用所述的样式。
only screen: only关键字用于防止不支持带有媒体功能的媒体查询的旧浏览器应用指定的样式。
为了阻止旧的浏览器看到样式表,你可以这样写:
@media only screen and (max-width:630px){ ... }
关键字' only '将对旧的用户代理隐藏样式表。
@hybrid的回答很有信息,但它没有解释@ashitaka提到的目的:“如果你使用移动优先的方法呢?所以,我们先有了移动CSS,然后使用最小宽度来定位更大的网站。我们不应该在这种情况下使用唯一的关键字,对吧?”
想在这里补充一下,目的只是为了防止非支持的浏览器使用其他设备样式,如果它从“屏幕”开始,没有它将把它作为一个屏幕,而如果它从“only”样式开始,将被忽略。
回答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风格,但有不必要的开销。在这种情况下,如果浏览器不支持,它将回退到第二个样式表,忽略第一个样式表。
媒体查询用于创建响应式网页设计。在媒体查询中,屏幕和唯一屏幕都被使用。
screen:设置媒体查询的屏幕大小。屏幕大小可以通过max-width和min-width来设置。
Screen用于许多屏幕较小的智能手机的样式,你可以这样写:
@media screen and (max-width:630px){ ... }
在上面的代码中,screen是说对于一个最大宽度为630px的屏幕和窗口大小,你想应用所述的样式。
only screen: only关键字用于防止不支持带有媒体功能的媒体查询的旧浏览器应用指定的样式。
为了阻止旧的浏览器看到样式表,你可以这样写:
@media only screen and (max-width:630px){ ... }
关键字' only '将对旧的用户代理隐藏样式表。
要为许多屏幕较小的智能手机设计样式,你可以这样写:
@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
让我们一个一个地分析你的例子。
@media (max-width:632px)
这个是说对于一个最大宽度为632px的窗口,你想要应用这些样式。在这种尺寸下,大多数情况下你会说任何比桌面屏幕小的东西。
@media screen and (max-width:632px)
这个是说对于一个带有屏幕的设备和一个max-width为632px的窗口应用样式。这与上面的几乎相同,除了你指定的是屏幕,而不是其他可用的媒体类型,最常见的另一种是打印。
@media only screen and (max-width:632px)
下面是W3C对这一点的直接解释。
关键字' only '也可以用于对旧的用户代理隐藏样式表。用户代理必须处理以' only '开头的媒体查询,就好像' only '关键字不存在一样。
由于没有“only”这样的媒体类型,旧的浏览器应该忽略样式表。
这是该页上示例9中引用的链接。
希望这能对媒体的质疑有所启发。
编辑:
一定要看看@hybrids关于如何处理唯一关键字的出色回答。