3回答

• 

  cry_shoulder

  2020-03-03 23:46:37

  https://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries/

  我看了下一篇老外的讲解，链接在上面，第二条回答就是，感兴趣的可以去看看。
  

  假如有如下代码

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

  在老版本浏览器只会被翻译成 

  media="screen"

  而不会去识别后面的 (min-width: 401px) and (max-width: 600px)，所以说只要是screen媒体，不管宽度多宽，该样式表都会被渲染。

  而假如加了only关键字的话，例如如下代码

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

  则会被翻译成

  media="only"

   因为并没有什么媒体类型是"only"，所以浏览器也不会去渲染后面的样式表。

  
  

  所以说白了，就是对于老版本浏览器，把这条样式表隐藏掉，仅此而已。

  
  

  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.

  0 0
• 

  慕数据3446481

  2019-05-25 21:56:49

  前面没有解释过什么是媒体特性、媒体类型和媒体查询吧？一脸懵逼

  
  

  1 0

  慕雪3362...

  https://www.cnblogs.com/august-8/p/4537685.html 可以看下这个

  2019-07-24 11:39:55

  共 1 条回复 >

• 

  爱上慕婉清6262634

  2017-10-11 16:05:06

  作用就一个，就是忽略

  比如写了一个样式里面有下面两条

  @media only screen and (min-width:240px){body{background:red !important;}}

  body{background:green;}

  上面两条命令很简单，第一条当设备屏幕宽度大于240px时背景为红色，第二条背景为绿色

  假设设备屏幕宽度为320px，如果设备支持媒体特性时，它的背景会显示为红色，如果设备不支持媒体特性但支持媒体类型时，此时它的背景会显示为绿色，即即使满足宽度大于240px但不支持媒体查询，所以不会应用媒体查询内部样式

  1 0

  风起临冬

  所有only的意思是，只有同时满足媒体查询和宽度大于240，背景才为红色？那么如果我不加only，不支持媒体查询的设备依然会是背景红色吗

  2018-08-10 17:53:47

  共 1 条回复 >