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

What is the difference between "screen" and "only screen" in media queries?

提问by Jitendra Vyas

What is the difference between screenand only screenin media queries?

媒体查询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" />

Why are we required to use only screen? Does screennot itself provide enough information to be rendered onlyfor screen?

为什么我们需要使用only screen？难道screen不是本身提供足够的信息来渲染只用于屏幕？

I've seen many responsive websites using any of these three different ways:

我见过许多响应式网站使用这三种不同方式中的任何一种：

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

@media (max-width:632px)

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

回答by Matthew Green

Let's break down your examples one by one.

让我们一一分解您的示例。

@media (max-width:632px)

This one is saying for a window with a max-widthof 632px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases.

这是一个max-width632px的窗口，你想应用这些样式。在大多数情况下，在那个尺寸下，您会谈论比桌面屏幕更小的任何东西。

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

This one is saying for a device with a screenand a window with max-widthof 632px apply the style. This is almost identical to the above except you are specifying screenas opposed to the other available media typesthe most common other one being print.

这个是说对于具有screen和max-width632px的窗口的设备应用该样式。这几乎与上面的相同，除了您指定的screen是与其他可用媒体类型相反 的最常见的另一种是print.

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

Here is a quote straight from W3C to explain this one.

这是直接来自 W3C 的引文来解释这一点。

The keyword ‘only' can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only' as if the ‘only' keyword was not present.

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

As there is no such media type as "only", the style sheet should be ignored by older browsers.

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

Here's the link to that quotethat is shown in example 9 on that page.

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

Hopefully this sheds some light on media queries.

希望这对媒体查询有所启发。

EDIT:

编辑：

Be sure to check out @hybrids excellent answeron how the onlykeyword is really handled.

请务必查看@hybrids关于如何only真正处理关键字的优秀答案。

回答by hybrid

The following is from Adobe docs.

以下来自Adobe 文档。

---

---

The media queries specification also provides the keyword only, which is intended to hide media queries from older browsers. Like not, the keyword must come at the beginning of the declaration. For example:

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

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

Browsers that don't recognize media queries expect a comma-separated list of media types, and the specification says they shouldtruncate each value immediately before the first nonalphanumeric character that isn't a hyphen. So, an old browser shouldinterpret the preceding example as this:

不能识别媒体查询的浏览器需要一个以逗号分隔的媒体类型列表，并且规范说他们应该在第一个不是连字符的非字母数字字符之前截断每个值。因此，旧浏览器应该将前面的示例解释为：

media="only"

Because there is no such media type as only, the stylesheet is ignored. Similarly, an old browser shouldinterpret

因为没有这样的媒体类型 only，样式表被忽略。同样，旧浏览器应该解释

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

as

作为

media="screen"

In other words, it should apply the style rules to all screen devices, even though it doesn't know what the media queries mean.

换句话说，它应该将样式规则应用于所有屏幕设备，即使它不知道媒体查询的含义。

Unfortunately, IE 6–8 failed to implement the specification correctly.

不幸的是，IE 6-8 未能正确实现规范。

Instead of applying the styles to all screen devices, it ignores the style sheet altogether.

它没有将样式应用于所有屏幕设备，而是完全忽略样式表。

In spite of this behavior, it's still recommended to prefix media queries with only if you want to hide the styles from other, less common browsers.

尽管有这种行为，但仍然建议仅在您想对其他不太常见的浏览器隐藏样式时才为媒体查询添加前缀。

---

---

So, using

所以，使用

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

and

和

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

will have the same effect in IE6-8: both will prevent those styles from being used. They will, however, still be downloaded.

在 IE6-8 中将具有相同的效果：两者都会阻止使用这些样式。但是，它们仍将被下载。

Also, in browsers that support CSS3 media queries, both versions will load the styles if the viewport width is larger than 401pxand the media type is screen.

此外，在支持 CSS3 媒体查询的浏览器中，如果视口宽度大于401px且媒体类型为 screen ，则两个版本都会加载样式。

I'm not entirely sure which browsers that don't support CSS3 media queries would need the onlyversion

我不完全确定哪些不支持 CSS3 媒体查询的浏览器需要该only版本

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

as opposed to

与

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

to make sure it is not interpreted as

以确保它不被解释为

media="screen"

It would be a good test for someone with access to a device lab.

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

回答by sandeep

To style for many smartphones with smaller screens, you could write:

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

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

To block older browsers from seeing an iPhone or Android phone style sheet, you could write:

要阻止旧浏览器看到 iPhone 或 Android 手机样式表，您可以编写：

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

Read this article for more http://webdesign.about.com/od/css3/a/css3-media-queries.htm

阅读这篇文章了解更多http://webdesign.about.com/od/css3/a/css3-media-queries.htm

回答by Diablo Geto

Answer by @hybrid is quite informative, except it doesn't explains the purpose as mentioned by @ashitaka "What if you use the Mobile First approach? So, we have the mobile CSS first and then use min-width to target larger sites. We shouldn't use the only keyword in that context, right? "

@hybrid 的回答非常有用，但它没有解释@ashitaka 提到的目的“如果您使用移动优先方法会怎样？所以，我们首先使用移动 CSS，然后使用 min-width 来定位更大的网站。我们不应该在那种情况下使用唯一的关键字，对吗？”

Want to add in here that the purpose is simply to prevent non supporting browsers to use that Other device style as if it starts from "screen" without it will take it for screen where as if it starts from "only" style will be ignored.

想在这里补充一点，目的只是为了防止不支持的浏览器使用其他设备样式，就好像它从“屏幕”开始一样，而不会将它作为屏幕，而好像它从“仅”样式开始将被忽略。

Answering to ashitaka consider this example

回答 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)" />

If we don't use "only" it will still work as desktop style will also be used striking android styles but with unnecessary overhead. In this case IF a browser is non supporting it will fallback to second Style-sheet ignoring the first.

如果我们不使用“only”，它仍然可以工作，因为桌面样式也将使用醒目的 android 样式，但会产生不必要的开销。在这种情况下，如果浏览器不支持，它将退回到第二个样式表而忽略第一个。

回答by itolima esther

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

screenhere is to set the screen size of the media query. E.g the maximum width of the display area is 480px. So it is specifying the screen as opposed to the other available media types.

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

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

only screenhere is used to prevent older browsers that do not support media queries with media features from applying the specified styles.

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