Media Queries直譯過(guò)來(lái)就是“媒體查詢(xún)”，在我們平時(shí)的Web頁(yè)面中head部分常看到這樣的一段代碼：
 

其中兩種方式引入CSS樣式都有一個(gè)共同的屬性“media”，而這個(gè)“media”就是用來(lái)指定特定的媒體類(lèi)型，在HTML4和CSS2中充許你使用“media”來(lái)指定特定的媒體類(lèi)型，如屏幕（screen）和打印（print）的樣式表，當(dāng)然還有其他的，比如說(shuō)“TV”,“handheld”等，其中“all”表示的是支持所有媒體介質(zhì)。有關(guān)于更多的Media類(lèi)型，可以查看http://www.w3.org/TR/CSS2/media.html#media-types。

上面簡(jiǎn)單說(shuō)了一下HTML4和CSS2的“Media Queries”,而今天的主要是來(lái)學(xué)習(xí)CSS3中的”Media Queries”的更多使用方法和相關(guān)知識(shí)，下面我們開(kāi)始進(jìn)入今天的主題。CSS3中的Media Queries增加了更多的媒體查詢(xún)，同時(shí)你可以添加不同的媒體類(lèi)型的表達(dá)式用來(lái)檢查媒體是否符合某些條件，如果媒體符合相應(yīng)的條件，那么就會(huì)調(diào)用對(duì)應(yīng)的樣式表。換句簡(jiǎn)單的說(shuō)，“在CSS3中我們可以設(shè)置不同類(lèi)型的媒體條件，并根據(jù)對(duì)應(yīng)的條件，給相應(yīng)符合條件的媒體調(diào)用相對(duì)應(yīng)的樣式表”。現(xiàn)在最常見(jiàn)的一個(gè)例子，你可以同時(shí)給PC機(jī)的大屏幕和移動(dòng)設(shè)備設(shè)置不同的樣式表。這功能是非常強(qiáng)大的，他可以讓你定制不同的分辨率和設(shè)備，并在不改變內(nèi)容的情況下，讓你制作的web頁(yè)面在不同的分辨率和設(shè)備下都能顯示正常，并且不會(huì)因此而丟失樣式。

首先來(lái)看一個(gè)簡(jiǎn)單的實(shí)例：

上面的media語(yǔ)句表示的是：當(dāng)頁(yè)頁(yè)寬度小于或等于600px,調(diào)用small.css樣式表來(lái)渲染你的Web頁(yè)面。首先來(lái)看media的語(yǔ)句中包含的內(nèi)容：
1、screen：這個(gè)不用說(shuō)大家都知道，指的是一種媒體類(lèi)型；
2、and：被稱(chēng)為關(guān)鍵詞，與其相似的還有not,only，稍后會(huì)介紹；
3、（max-width:600px）：這個(gè)就是媒體特性，說(shuō)得通俗一點(diǎn)就是媒體條件。
前面這個(gè)簡(jiǎn)單的實(shí)例引出兩個(gè)概念性的東西，一個(gè)就是媒體類(lèi)型（Media Type）和 媒體特性（Media Query），首先一起來(lái)理解一下這兩個(gè)概念：