“screen”和“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

小开

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

@media (max-width:632px)

这个是说，对于一个max-width为632px的窗口，你想应用这些样式。在这种尺寸下，大多数情况下你会说任何比桌面屏幕小的东西。

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

这个是说对于一个screen的设备和一个max-width为632px的窗口应用样式。这与上面的几乎相同，除了你指定的是screen而不是其他可用的媒体类型，最常见的另一个是print。

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

下面是W3C对这一点的直接解释。

关键字' only '也可以用于对旧的用户代理隐藏样式表。用户代理必须处理以' only '开头的媒体查询，就好像' only '关键字不存在一样。

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

下面是示例9中显示的引用的链接。

希望这能对媒体的质疑有所启发。

编辑:

一定要查看@混血儿回答得好，了解only关键字是如何真正处理的。

小开

以下内容来自< >强Adobe文档< / >强。

媒体查询规范还提供了关键字only，它旨在对旧浏览器隐藏媒体查询。像not一样，关键字必须出现在声明的开头。例如:

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

不识别媒体查询的浏览器期望使用逗号分隔的媒体类型列表，规范说应该会立即截断第一个非字母数字字符(非连字符)之前的每个值。所以，旧的浏览器应该会这样解释上面的例子:

media="only"

因为没有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"

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

小开

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

小开

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

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

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

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

小开

媒体查询用于创建响应式网页设计。screen和only screen都用于媒体查询。

screen:用于设置媒体查询的屏幕大小。屏幕大小可以通过max-width和min-width来设置。

screen用于许多屏幕较小的智能手机，你可以这样写:

@media screen and (max-width:630px){ ... }

在上面的代码screen中，对于一个最大宽度为630px的屏幕和窗口，你想要应用所述的样式。

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

为了阻止旧的浏览器看到样式表，你可以这样写:

@media only screen and (max-width:630px){ ... }

关键字' only '将对旧的用户代理隐藏样式表。