“屏幕”和“屏幕”之间的区别是什么。和“仅屏幕”在媒体查询？ [英] What is the difference between "screen" and "only screen" in media queries?

问题描述

什么是媒体查询界面和仅屏幕之间的区别

 <联系媒体= screen and（max-device-width：480px）rel =stylesheethref =m.css/> 
< link media =only screen and（max-device-width：480px） =stylesheethref =m.css/> 
  

为什么我们要求使用仅。 屏幕本身是否不提供足够的信息仅为屏幕呈现？

我看过许多回应式网站。有些使用

  @media屏幕和（max-width：632px）
  pre> 
 
 
有些
  @media（max-width：632px） 
  
和一些
 code> @media只有屏幕（最大宽度：632px）
  
 
 
解决方案
让我们一一分解你的例子。
  @media（max-width：632px）
  
这是一个窗口 max-width  632px，你想应用这些样式。在这个大小，你会谈论什么小于桌面屏幕在大多数情况下。 
  @media screen and（max-width：632px）
  
这是一个具有屏幕的设备和一个窗口 max-width 的632px应用样式。除了你指定 screen ，而不是其他可用的媒体类型最常见的另一个是 print 。
  @media only screen and（max-width：632px）
  
 
 
 
关键字'only'也可用于隐藏较旧的用户代理的样式表。用户代理必须处理以'only'开头的媒体查询，如同only关键字不存在。
 
 
媒体类型为仅，样式表应该被旧版浏览器忽略。
 
 
 
这是链接到该页面上的示例9中显示的该报价。
 
 
 
希望这能够解释媒体查询。
 
 
 
编辑：
 
 
 
请务必查看关于如何真正处理关键字的
 
What is the difference between "screen" and "only screen" in media queries?
<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'. Does screen not itself provide enough information to be rendered only for Screen? 

I've seen many responsive websites. Some use
@media screen and (max-width:632px)
Some 
@media (max-width:632px)
and some
@media only screen and (max-width:632px)

解决方案
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. 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. 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.
@media only screen and (max-width:632px)
Here is a quote straight from W3C to explain this one.

  
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.

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.

                        
这篇关于“屏幕”和“屏幕”之间的区别是什么。和“仅屏幕”在媒体查询？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！