Media Queries的引入，其作用就是允許添加表達(dá)式用以確定媒體的情況，以此來應(yīng)用不同的樣式表。換句話說，其允許我們?cè)诓桓淖儍?nèi)容的情況下，改變頁面的布局以精確適應(yīng)不同的設(shè)備，以此加強(qiáng)體驗(yàn)。所以Media Queries和CSS優(yōu)化沒有關(guān)系，甚至是矛盾的。引用CSS3 Media Queries里直觀的DEMO，當(dāng)瀏覽器寬度改變時(shí)，應(yīng)用的CSS發(fā)生變化。而這些，原本需要 JavaScript 的控制才能做到。
　　并非瀏覽器都支持Media Queries，瀏覽器怎么看待Media Queries？
　　Media Queries是CSS3對(duì)于Media Type的一個(gè)擴(kuò)展，所以不支持Media Queries的瀏覽器，應(yīng)該仍然要識(shí)別Media Type，但是IE只是簡單的忽略了樣式。only關(guān)鍵字可能顯得有些多余，對(duì)支持Media Queries的瀏覽器來說確實(shí)是這樣，因?yàn)榧硬患觨nly沒有影響。only的作用，很多時(shí)候是用來對(duì)那些不支持Media Queries但是卻讀取Media Type的設(shè)備隱藏樣式表的。
　　支持Media Queries的設(shè)備，正確應(yīng)用樣式，就仿佛only不存在
　　不支持Media Queries但正確讀取Media Type的設(shè)備，由于先讀取到only而不是screen，將忽略這個(gè)樣式
　　不支持Media Queries的IE不論是否有only，都忽略樣式
　　完整的支持情況羅列成如下表：
 


 
　　看看Media Queries可以做什么
　　代碼:<link rel="stylesheet" type="text/css" href="swordair.css" media="screen and (min-width: 400px)">
　　在media屬性里：
　　screen 是媒體類型里的一種，CSS2.1定義了10種媒體類型
　　and 被稱為關(guān)鍵字，其他關(guān)鍵字還包括 not(排除某種設(shè)備)，only(限定某種設(shè)備)
　　(min-width: 400px) 就是媒體特性，其被放置在一對(duì)圓括號(hào)中。完整的特性參看 相關(guān)的Media features部分
　　媒體特性共13種，可以說是一個(gè)類似CSS屬性的集合。但和CSS屬性不同的是，媒體特性只接受單個(gè)的邏輯表達(dá)式作為其值，或者沒有值。并且其中的大部分接受 min/max 的前綴，用來表示 大于等于/小于等于 的邏輯，以此避免使用 < 和 > 這些字符。那么，回到剛才的那條 Media Query，media="screen and (min-width: 400px)" 的意思就是當(dāng)屏幕的寬度大于等于400px的時(shí)候，應(yīng)用此條CSS。
　　一個(gè) Media Query 包含一種媒體類型，如果媒體類型沒有指定，那么就是默認(rèn)類型all。
　　一個(gè) Media Query 包含0到多個(gè)表達(dá)式，表達(dá)式又包含0到多個(gè)關(guān)鍵字，以及一種媒體特性。
　　逗號(hào)(,)被用來表示并列，表示或者。
　　not 關(guān)鍵字用來排除符合表達(dá)式的設(shè)備。