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

本文翻译自：What is the difference between “screen” and “only screen” in media queries?

What is the difference between screen and only screen in 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 ? 为什么我们only screen需要使用only screen ？ Does screen not itself provide enough information to be rendered only for 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)

#1楼

参考：https://stackoom.com/question/Zs7d/媒体查询中-屏幕-和-仅屏幕-之间有什么区别

#2楼

The following is from Adobe docs . 以下内容来自Adobe docs 。

The media queries specification also provides the keyword only , which is intended to hide media queries from older browsers. 媒体查询规范还only提供关键字，其旨在隐藏来自旧浏览器的媒体查询。 Like not , the keyword must come at the beginning of the declaration. not喜欢，关键字必须出现在声明的开头。 For example: 例如：

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 should truncate each value immediately before the first nonalphanumeric character that isn't a hyphen. 不识别媒体查询的浏览器需要以逗号分隔的媒体类型列表，并且规范说它们应该在不是连字符的第一个非字母数字字符之前截断每个值。 So, an old browser should interpret the preceding example as this: 因此，旧浏览器应将前面的示例解释为：

media="only"

Because there is no such media type as only, the stylesheet is ignored. 因为没有这样的媒体类型，所以忽略样式表。 Similarly, an old browser should interpret 同样，旧的浏览器应该解释

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. 将在IE6-8中具有相同的效果：两者都将阻止使用这些样式。 They will, however, still be downloaded. 但是，它们仍将被下载。

Also, in browsers that support CSS3 media queries, both versions will load the styles if the viewport width is larger than 401px and the media type is screen. 此外，在支持CSS3媒体查询的浏览器中，如果视口宽度大于401px且媒体类型为屏幕，则两个版本都将加载样式。

I'm not entirely sure which browsers that don't support CSS3 media queries would need the only version 我不完全确定哪些不支持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. 对于有权访问设备实验室的人来说，这将是一个很好的测试。

#3楼

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提到的目的“如果你使用Mobile First方法怎么办？所以，我们首先使用移动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. 如果我们不使用“only”它仍然可以工作，因为桌面样式也将使用引人注目的Android样式，但有不必要的开销。 In this case IF a browser is non supporting it will fallback to second Style-sheet ignoring the first. 在这种情况下，如果浏览器不支持它将回退到第二个样式表忽略第一个。

#4楼

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

#5楼

Let's break down your examples one by one. 让我们一个一个地分解你的例子。

@media (max-width:632px)

This one is saying for a window with a max-width of 632px that you want to apply these styles. 这个是说你想要应用这些样式的max-width为632px的窗口。 At that size you would be talking about anything smaller than a desktop screen in most cases. 在这种情况下，在大多数情况下，你会谈论比桌面屏幕小的任何东西。

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

This one is saying for a device with a screen and a window with max-width of 632px apply the style. 这个是说一个带screen的设备和max-width为632px的窗口应用这种风格。 This is almost identical to the above except you are specifying screen as opposed to the other available media types the most common other one being print . 这是几乎相同的，所不同您指定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. 用户代理必须处理以“仅”开头的媒体查询，就好像“仅”关键字不存在一样。

As there is no such media type as "only", the style sheet should be ignored by older browsers. 由于没有“仅”这样的媒体类型，旧版浏览器应该忽略样式表。

Here's the link to that quote that 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 answer on how the only keyword is really handled. 请务必查看@hybrids关于如何真正处理only关键字的优秀答案。

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

媒体查询中常用的媒体类型罗列
关于媒体查询的概念这里就不多介绍了,具体可以参阅媒体查询详解一章节. 下面罗列一下媒体查询中媒体的类型,当然并不是所有的媒体类型都是经常用到的,有的仅作了解即可. 列表如下: (1).all – ...
关于css媒体查询中的选择器权重的问题
@media中的选择器的优先级今天写响应式页面的时候发现了个问题在这里记录一下 .content .right-box {width: 240px;float: right; } 我写的页面是三栏式 ...
Gradle中的实现和编译之间有什么区别？
本文翻译自:What's the difference between implementation and compile in Gradle? After updating to Android ...
html5 视口,html5 – 在媒体查询中更改视口
接受的答案是正确的,但如果您正在使用jQuery并且jQuery需要准备好.在慢速连接上,您会遇到该代码的问题,因此您可能会收到"$"未定义的错误. 这就是我在这种情况下更喜欢纯J ...
scala java 区别_Scala（和Java）中的类和类型之间有什么区别？
当您说"类型"时,我将假设您主要是指静态类型. 但是我将在短期内讨论动态类型. 静态类型是可以被静态证明的程序一部分的属性(静态表示"不运行它"). 在静态类型 ...
java建一个conversion_Scala中的JavaConverters和JavaConversions之间有什么区别？
JavaConversions 提供了一系列隐式方法,可以在Java集合和最接近的相应Scala集合之间进行转换,反之亦然 . 这是通过创建实现Scala接口的包装器并将调用转发到底层Java集合或J ...
java迭代和递归的异同_Java中的递归和迭代之间有什么区别？
该递归和迭代都重复执行的指令集.递归是指函数中的语句重复调用自身时的情况.该迭代是当循环重复执行,直到控制条件为假.递归和迭代之间的主要区别在于,递归是一个过程,始终应用于函数,而迭代则应用于我们要重 ...
使用CSS 媒体查询功能满足不同屏幕分辨率要求
http://www.adobe.com/cn/devnet/dreamweaver/articles/dw_html5_pt3.html 这是探索Dreamweaver CS5.5的HTML5和CS ...
CSS：媒体查询 CSS3 Media Queries
定义和使用使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. ...

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

#1楼

#2楼

#3楼

#4楼

#5楼

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

最新文章

热门文章