Media Queries這功能是非常強(qiáng)大的，他可以讓你定制不同的分辨率和設(shè)備，并在不改變內(nèi)容的情況下，讓你制作的web頁面在不同的分辨率和設(shè)備下都能顯示正常，并且不會因此而丟失樣式。
首先來看一個(gè)簡單的實(shí)例：


上面的media語句表示的是：當(dāng)頁頁寬度小于或等于600px,調(diào)用small.css樣式表來渲染你的Web頁面。首先來看media的語句中包含的內(nèi)容：
1、screen：這個(gè)不用說大家都知道，指的是一種媒體類型；
2、and：被稱為關(guān)鍵詞，與其相似的還有not,only，稍后會介紹；
3、（max-width:600px）：這個(gè)就是媒體特性，說得通俗一點(diǎn)就是媒體條件。
為了更能理解Media Query，我們在次回到前面的實(shí)例上：轉(zhuǎn)換成css中的寫法為：


其實(shí)就是把small.css文件中的樣式放在了@media srceen and (max-width;600px){…}的大括號之中。在語句上面的語句結(jié)構(gòu)中，可以看出Media query和css的屬性集合很相似，主要區(qū)別在：
1、Media query只接受單個(gè)的邏輯表達(dá)式作為其值，或者沒有值；
2、css屬性用于聲明如何表現(xiàn)頁頁的信息；而Media Query是一個(gè)用于判斷輸出設(shè)備是否滿足某種條件的表達(dá)式；
3、Media Query其中的大部分接受min/max前綴，用來表示其邏輯關(guān)系，表示應(yīng)用于大于等于或者小于等于某個(gè)值的情況
4、CSS屬性要求必須有屬性值，Media Query可以沒有值，因?yàn)槠浔磉_(dá)式返回的只有真或假兩種

下面我們一起來看看Media Queries的具體使用方式
一、最大寬度Max Width


上面表示的是：當(dāng)屏幕大于或等于900px時(shí)，將采用big.css樣式來渲染W(wǎng)eb頁面。
二、多個(gè)Media Queries使用


Media Query可以結(jié)合多個(gè)媒體查詢，換句話說，一個(gè)Media Query可以包含0到多個(gè)表達(dá)式，表達(dá)式又可以包含0到多個(gè)關(guān)鍵字，以及一種Media Type。正如上面的其表示的是當(dāng)屏幕在600px-900px之間時(shí)采用style.css樣式來渲染web頁面。
三、設(shè)備屏幕的輸出寬度Device Width


上面的代碼指的是iphone.css樣式適用于最大設(shè)備寬度為480px，比如說iPhone上的顯示，這里的max-device-width所指的是設(shè)備的實(shí)際分辨率，也就是指可視面積分辨率
我們可以使用media query為android手機(jī)在不同分辨率提供特定樣式，這樣就可以解決屏幕分辨率的不同給android手機(jī)的頁面重構(gòu)問題。
四、not關(guān)鍵字


not關(guān)鍵字是用來排除某種制定的媒體類型，換句話來說就是用于排除符合表達(dá)式的設(shè)備。
五、only關(guān)鍵字


only用來定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器。其實(shí)only很多時(shí)候是用來對那些不支持Media Query但卻支持Media Type的設(shè)備隱藏樣式表的。其主要有：支持媒體特性（Media Queries）的設(shè)備，正常調(diào)用樣式，此時(shí)就當(dāng)only不存在；對于不支持媒體特性(Media Queries)但又支持媒體類型(Media Type)的設(shè)備，這樣就會不讀了樣式，因?yàn)槠湎茸xonly而不是screen；另外不支持Media Qqueries的瀏覽器，不論是否支持only，樣式都不會被采用。
六、其他
在Media Query中如果沒有明確指定Media Type，那么其默認(rèn)為all，如：


另外還有使用逗號（，）被用來表示并列或者表示或，如下


上面代碼中style.css樣式被用在寬度小于或等于480px的手持設(shè)備上，或者被用于屏幕寬度大于或等于960px的設(shè)備上。
關(guān)于Media Query的使用這一節(jié)就介紹到此，最后總體規(guī)納一下其功能，個(gè)人認(rèn)為就是一句話：Media Queries能在不同的條件下使用不同的樣式，使用頁面達(dá)到不同的渲染效果。

最新評論