隨著科學(xué)技術(shù)不斷的向前發(fā)展，網(wǎng)頁(yè)的瀏覽終端越來(lái)越多樣化，用戶可以通過(guò)：寬屏電視、臺(tái)式電腦、筆記本電腦、平板電腦和智能手機(jī)來(lái)訪問(wèn)你的網(wǎng)站。盡管你無(wú)法保證一個(gè)網(wǎng)站在不同屏幕尺寸和不同設(shè)備上看起來(lái)完全一模一樣，但至少要讓你的Web頁(yè)面能適配用戶的終端，讓他更好的呈現(xiàn)在你的用戶面前。本文使用CSS3中的Media Queries模塊來(lái)讓一個(gè)頁(yè)面適應(yīng)不同的終端（或屏幕尺寸），從而讓你的頁(yè)面讓用戶有一個(gè)更好的體驗(yàn)。
Media Queries
Media Queries是CSS3新增加的一個(gè)模塊功能，其最大的特色就是通過(guò)CSS3來(lái)查詢媒體，然后調(diào)用對(duì)應(yīng)的樣式。其實(shí)這個(gè)功能在CSS2.1中就有出現(xiàn)過(guò)，只不過(guò)那個(gè)時(shí)候此功能并不強(qiáng)大，我們最常見(jiàn)的就是給打印設(shè)備添加打印樣式。隨著時(shí)代的變化，這個(gè)模塊功能越來(lái)越強(qiáng)大。
在徹底的了解Media Queries我們需要了解其中的兩個(gè)重要部分，第一個(gè)是媒體類(lèi)型，第二個(gè)是媒體特性。下面的內(nèi)容我們簡(jiǎn)單的來(lái)了解這兩個(gè)部分：
一、媒體類(lèi)型
媒體類(lèi)型（Media Type）在CSS2中是一個(gè)常見(jiàn)的屬性，也是一個(gè)非常有用的屬性，可以通過(guò)媒體類(lèi)型對(duì)不同的設(shè)備指定不同的樣式。
在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(頁(yè)面打印或打印預(yù)覽模式)，其實(shí)媒體類(lèi)型遠(yuǎn)不止這三種，W3C總共列出了10種媒體類(lèi)型。如下表所示：
其中Screen、All和Print為最常見(jiàn)的三種媒體類(lèi)型。
二、媒體類(lèi)型的引用方法?
在實(shí)際中媒體類(lèi)型有近十種之多，實(shí)際之中常用的也就那么幾種，不過(guò)媒體類(lèi)型的引用方法也有多種，常見(jiàn)的有：link標(biāo)簽、@import和CSS3新增的@media幾種：
第一種：link方法
link方法引入媒體類(lèi)型其實(shí)就是在標(biāo)簽引用樣式的時(shí)候，通過(guò)link標(biāo)簽中的media屬性來(lái)指定不同的媒體類(lèi)型。如下所示。
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
第二種：@import方法
@import可以引用樣式文件，同樣也可以用來(lái)引用媒體類(lèi)型。@import引入媒體類(lèi)型主要有兩種方式，一種是在樣式中通過(guò)@import調(diào)用另一個(gè)樣式文件；另一種方法是在標(biāo)簽中的中引入，但這種使用方法在IE6~7都不被支持，如樣式文件中調(diào)用另一個(gè)樣式文件時(shí)，就可以指定對(duì)應(yīng)的媒體類(lèi)型。
@importurl(reset.css) screen;
@importurl(print.css) print;
在<head>中的<style>標(biāo)簽中引入媒體類(lèi)型方法
<head>
????????<styletype="text/css">
????????????@importurl(style.css) all;
????????</style>
</head>
第三種：@media方法
@media是CSS3中新引進(jìn)的一個(gè)特性，被稱為媒體查詢。在頁(yè)面中也可以通過(guò)這個(gè)屬性來(lái)引入媒體類(lèi)型。@media引入媒體類(lèi)型和@import有點(diǎn)類(lèi)似也具有兩方式。
（1）在樣式文件中引用媒體類(lèi)型：
@mediascreen{
????????選擇器{/*你的樣式代碼寫(xiě)在這里…*/}
? ?}?
（2）使用@media引入媒體類(lèi)型的方式是在<head>標(biāo)簽中的<style>中引用。
<head>
????<styletype="text/css">
????????????????@media screen{?
?????????????????????????????選擇器{/*你的樣式代碼寫(xiě)在這里…*/}
? ? ? ? ? ? ? ? ?}
????????</style>
</head>
三、Media Queries使用方法
Media Queries能在不同的條件下使用不同的樣式，使頁(yè)面在不同在終端設(shè)備下達(dá)到不同的渲染效果。前面簡(jiǎn)單的介紹了Media Queries如何引用到項(xiàng)目中，但Media Queries有其自己的使用規(guī)則。
@media 媒體類(lèi)型and （媒體特性）{你的樣式}
注意：使用Media Queries必須要使用“@media”開(kāi)頭，然后指定媒體類(lèi)型（也可以稱為設(shè)備類(lèi)型），隨后是指定媒體特性（也可以稱之為設(shè)備特性）。媒體特性的書(shū)寫(xiě)方式和樣式的書(shū)寫(xiě)方式非常相似，主要分為兩個(gè)部分，第一個(gè)部分指的是媒體特性，第二部分為媒體特性所指定的值，而且這兩個(gè)部分之間使用冒號(hào)分隔。例如：
(max-width: 480px)
從前面表中可以得知，主要有十種媒體類(lèi)型和13種媒體特性，將其組合就類(lèi)似于不同的CSS集合。但與CSS屬性不同的是，媒體特性是通過(guò)min/max來(lái)表示大于等于或小于做為邏輯判斷，而不是使用小于（<）和大于（>）這樣的符號(hào)來(lái)判斷。接下來(lái)一起來(lái)看看Media Queries在實(shí)際項(xiàng)目中常用的方式。
1、最大寬度max-width
“max-width”是媒體特性中最常用的一個(gè)特性，其意思是指媒體類(lèi)型小于或等于指定的寬度時(shí)，樣式生效。如：
上面表示的是：當(dāng)屏幕小于或等于480px時(shí),頁(yè)面中的廣告區(qū)塊（.ads）都將被隱藏。
2.最小寬度min-width
“min-width”與“max-width”相反，指的是媒體類(lèi)型大于或等于指定寬度時(shí)，樣式生效。
上面表示的是：當(dāng)屏幕大于或等于900px時(shí)，容器“.wrapper”的寬度為980px。
3.多個(gè)媒體特性使用
Media Queries可以使用關(guān)鍵詞"and"將多個(gè)媒體特性結(jié)合在一起。也就是說(shuō)，一個(gè)Media Query中可以包含0到多個(gè)表達(dá)式，表達(dá)式又可以包含0到多個(gè)關(guān)鍵字，以及一種媒體類(lèi)型。
當(dāng)屏幕在600px~900px之間時(shí)，body的背景色渲染為“#f5f5f5”，如下所示。
4.設(shè)備屏幕的輸出寬度Device Width
在智能設(shè)備上，例如iPhone、iPad等，還可以根據(jù)屏幕設(shè)備的尺寸來(lái)設(shè)置相應(yīng)的樣式（或者調(diào)用相應(yīng)的樣式文件）。同樣的，對(duì)于屏幕設(shè)備同樣可以使用“min/max”對(duì)應(yīng)參數(shù)，如“min-device-width”或者“max-device-width”。
上面的代碼指的是“iphone.css”樣式適用于最大設(shè)備寬度為480px，比如說(shuō)iPhone上的顯示，這里的“max-device-width”所指的是設(shè)備的實(shí)際分辨率，也就是指可視面積分辨率。
5. not關(guān)鍵詞
使用關(guān)鍵詞“not”是用來(lái)排除某種制定的媒體類(lèi)型，也就是用來(lái)排除符合表達(dá)式的設(shè)備。換句話說(shuō)，not關(guān)鍵詞表示對(duì)后面的表達(dá)式執(zhí)行取反操作，如：
@media not print and (max-width: 1200px){樣式代碼}
上面代碼表示的是：樣式代碼將被使用在除打印設(shè)備和設(shè)備寬度小于1200px下所有設(shè)備中。
6.only關(guān)鍵詞
only用來(lái)指定某種特定的媒體類(lèi)型，可以用來(lái)排除不支持媒體查詢的瀏覽器。其實(shí)only很多時(shí)候是用來(lái)對(duì)那些不支持Media Query但卻支持Media Type的設(shè)備隱藏樣式表的。其主要有：支持媒體特性的設(shè)備，正常調(diào)用樣式，此時(shí)就當(dāng)only不存在；表示不支持媒體特性但又支持媒體類(lèi)型的設(shè)備，這樣就會(huì)不讀樣式，因?yàn)槠湎葧?huì)讀取only而不是screen；另外不支持Media Queries的瀏覽器，不論是否支持only，樣式都不會(huì)被采用。如
在Media Query中如果沒(méi)有明確指定Media Type，那么其默認(rèn)為all，如：
另外在樣式中，還可以使用多條語(yǔ)句來(lái)將同一個(gè)樣式應(yīng)用于不同的媒體類(lèi)型和媒體特性中，指定方式如下所示。
上面代碼中style.css樣式被用在寬度小于或等于480px的手持設(shè)備上，或者被用于屏幕寬度大于或等于960px的設(shè)備上。?
到目前為止，CSS3 Media Queries得到了眾多瀏覽器支持，除了IE6-8瀏覽器不支持之外，在所有現(xiàn)代瀏覽器中都可以完美支持。還有一個(gè)與眾不同的時(shí)，Media Queries在其他瀏覽器中不要像其他CSS3屬性一樣在不同的瀏覽器中添加前綴。
