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)"

在老版本瀏覽器只會(huì)被翻譯成?

media="screen"

而不會(huì)去識(shí)別后面的 (min-width: 401px) and (max-width: 600px)，所以說只要是screen媒體，不管寬度多寬，該樣式表都會(huì)被渲染。

而假如加了only關(guān)鍵字的話，例如如下代碼

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

則會(huì)被翻譯成

media="only"

?因?yàn)椴]有什么媒體類型是"only"，所以瀏覽器也不會(huì)去渲染后面的樣式表。

所以說白了，就是對(duì)于老版本瀏覽器，把這條樣式表隱藏掉，僅此而已。

W3C對(duì)這個(gè)關(guān)鍵字的解釋如下（雖然我看不懂）：

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.

前面沒有解釋過什么是媒體特性、媒體類型和媒體查詢吧？一臉懵逼

作用就一個(gè)，就是忽略

比如寫了一個(gè)樣式里面有下面兩條

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

body{background:green;}

上面兩條命令很簡單，第一條當(dāng)設(shè)備屏幕寬度大于240px時(shí)背景為紅色，第二條背景為綠色

假設(shè)設(shè)備屏幕寬度為320px，如果設(shè)備支持媒體特性時(shí)，它的背景會(huì)顯示為紅色，如果設(shè)備不支持媒體特性但支持媒體類型時(shí)，此時(shí)它的背景會(huì)顯示為綠色，即即使?jié)M足寬度大于240px但不支持媒體查詢，所以不會(huì)應(yīng)用媒體查詢內(nèi)部樣式