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.

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

作用就一個，就是忽略

比如寫了一個樣式里面有下面兩條

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

body{background:green;}

上面兩條命令很簡單，第一條當設備屏幕寬度大于240px時背景為紅色，第二條背景為綠色

假設設備屏幕寬度為320px，如果設備支持媒體特性時，它的背景會顯示為紅色，如果設備不支持媒體特性但支持媒體類型時，此時它的背景會顯示為綠色，即即使滿足寬度大于240px但不支持媒體查詢，所以不會應用媒體查詢內部樣式