隨著科學技術(shù)不斷的向前發(fā)展，網(wǎng)頁的瀏覽終端越來越多樣化，用戶可以通過：寬屏電視针史、臺式電腦、筆記本電腦碟狞、平板電腦和智能手機來訪問你的網(wǎng)站啄枕。盡管你無法保證一個網(wǎng)站在不同屏幕尺寸和不同設(shè)備上看起來完全一模一樣，但至少要讓你的Web頁面能適配用戶的終端族沃，讓他更好的呈現(xiàn)在你的用戶面前频祝。在本節(jié)中，將會學到如何使用CSS3中的Media Queries模塊來讓一個頁面適應(yīng)不同的終端（或屏幕尺寸）脆淹，從而讓你的頁面讓用戶有一個更好的體驗常空。
Media Queries
Media Queries是CSS3新增加的一個模塊功能，其最大的特色就是通過CSS3來查詢媒體盖溺，然后調(diào)用對應(yīng)的樣式漓糙。其實這個功能在CSS2.1中就有出現(xiàn)過，只不過那個時候此功能并不強大烘嘱，我們最常見的就是給打印設(shè)備添加打印樣式昆禽。隨著時代的變化，這個模塊功能越來越強大拙友。
在徹底的了解Media Queries我們需要了解其中的兩個重要部分为狸，第一個是媒體類型，第二個是媒體特性遗契。下面的內(nèi)容我們簡單的來了解這兩個部分：
一、媒體類型
媒體類型（Media Type）在CSS2中是一個常見的屬性病曾，也是一個非常有用的屬性牍蜂，可以通過媒體類型對不同的設(shè)備指定不同的樣式漾根。
在CSS2中常碰到的就是all(全部)、screen(屏幕)鲫竞、print(頁面打印或打印預覽模式)辐怕，其實媒體類型遠不止這三種，W3C總共列出了10種媒體類型从绘。如下所示：
設(shè)備類型All
所有設(shè)備Braille
盲人用點字法觸覺回饋設(shè)備Embossed
盲文打印機Handheld
便攜設(shè)備Print
打印用紙或打印預覽視圖Projection
各種投影設(shè)備Screen
電腦顯示器Speech
語音或音頻合成器Tv
電視機類型設(shè)備Tty
使用固定密度字母柵格的媒介寄疏，比如電傳打字機和終端
其中Screen、All和Print為最常見的三種媒體類型僵井。
在實際中媒體類型有近十種之多陕截，實際之中常用的也就那么幾種，不過媒體類型的引用方法也有多種批什，常見的有：link標簽农曲、@import和CSS3新增的@media幾種：
link方法
link方法引入媒體類型其實就是在<link>標簽引用樣式的時候，通過link標簽中的media屬性來指定不同的媒體類型驻债。如下所示乳规。
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
@import方法
@import可以引用樣式文件，同樣也可以用來引用媒體類型合呐。@import引入媒體類型主要有兩種方式暮的，一種是在樣式中通過@import調(diào)用另一個樣式文件；另一種方法是在<head></head>標簽中的<style></style>中引入淌实，但這種使用方法在IE6~7都不被支持青扔，如樣式文件中調(diào)用另一個樣式文件時，就可以指定對應(yīng)的媒體類型翩伪。
@importurl(reset.css) screen;
@importurl(print.css) print;
在<head>中的<style>標簽中引入媒體類型方法微猖。
<head>
<style type="text/css">
@importurl(style.css) all;
</style>
</head>
@media方法
@media是CSS3中新引進的一個特性，被稱為媒體查詢缘屹。在頁面中也可以通過這個屬性來引入媒體類型凛剥。@media引入媒體類型和@import有點類似也具有兩方式。
（1）在樣式文件中引用媒體類型：
@media screen {
選擇器{/你的樣式代碼寫在這里…/}
}
（2）使用@media引入媒體類型的方式是在<head>標簽中的<style>中引用轻姿。
<head>
<style type="text/css">
@media screen{
選擇器{/*你的樣式代碼寫在這里…*/}
}
</style>
</head>
Media Queries使用方法
了解完這些概念性的東西犁珠，同學們最想知道的是Media Queries要如何使用？下面我們一起來探討其使用方法：
Media Queries能在不同的條件下使用不同的樣式互亮，使頁面在不同在終端設(shè)備下達到不同的渲染效果犁享。前面簡單的介紹了Media Queries如何引用到項目中，但Media Queries有其自己的使用規(guī)則豹休。具體來說,Media Queries的使用方法如下炊昆。
@media 媒體類型and （媒體特性）{你的樣式}
注意：使用Media Queries必須要使用“@media”開頭，然后指定媒體類型（也可以稱為設(shè)備類型），隨后是指定媒體特性（也可以稱之為設(shè)備特性）凤巨。媒體特性的書寫方式和樣式的書寫方式非常相似视乐，主要分為兩個部分，第一個部分指的是媒體特性敢茁，第二部分為媒體特性所指定的值佑淀，而且這兩個部分之間使用冒號分隔。例如：
(max-width: 480px)
從前面表中可以得知彰檬，主要有十種媒體類型和13種媒體特性伸刃，將其組合就類似于不同的CSS集合。但與CSS屬性不同的是逢倍，媒體特性是通過min/max來表示大于等于或小于做為邏輯判斷捧颅，而不是使用小于（<）和大于（>）這樣的符號來判斷。接下來一起來看看Media Queries在實際項目中常用的方式瓶堕。
- 最大寬度max-width
“max-width”是媒體特性中最常用的一個特性隘道，其意思是指媒體類型小于或等于指定的寬度時，樣式生效郎笆。如：
@media screen and (max-width:480px){
.ads {
display:none;
}
}
上面表示的是：當屏幕小于或等于480px時,頁面中的廣告區(qū)塊（.ads）都將被隱藏谭梗。
2.最小寬度min-width
“min-width”與“max-width”相反，指的是媒體類型大于或等于指定寬度時宛蚓，樣式生效激捏。
@media screen and (min-width:900px){
.wrapper{width: 980px;}
}
上面表示的是：當屏幕大于或等于900px時，容器“.wrapper”的寬度為980px凄吏。
3.多個媒體特性使用
Media Queries可以使用關(guān)鍵詞"and"將多個媒體特性結(jié)合在一起远舅。也就是說，一個Media Query中可以包含0到多個表達式痕钢，表達式又可以包含0到多個關(guān)鍵字图柏，以及一種媒體類型。
當屏幕在600px~900px之間時任连，body的背景色渲染為“#f5f5f5”蚤吹，如下所示。
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}
4.設(shè)備屏幕的輸出寬度Device Width
在智能設(shè)備上随抠，例如iPhone裁着、iPad等，還可以根據(jù)屏幕設(shè)備的尺寸來設(shè)置相應(yīng)的樣式（或者調(diào)用相應(yīng)的樣式文件）拱她。同樣的二驰，對于屏幕設(shè)備同樣可以使用“min/max”對應(yīng)參數(shù)，如“min-device-width”或者“max-device-width”秉沼。
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
上面的代碼指的是“iphone.css”樣式適用于最大設(shè)備寬度為480px桶雀，比如說iPhone上的顯示矿酵，這里的“max-device-width”所指的是設(shè)備的實際分辨率，也就是指可視面積分辨率背犯。
- not關(guān)鍵詞
使用關(guān)鍵詞“not”是用來排除某種制定的媒體類型坏瘩，也就是用來排除符合表達式的設(shè)備盅抚。換句話說漠魏，not關(guān)鍵詞表示對后面的表達式執(zhí)行取反操作，如：
@media not print and (max-width: 1200px){樣式代碼}
上面代碼表示的是：樣式代碼將被使用在除打印設(shè)備和設(shè)備寬度小于1200px下所有設(shè)備中妄均。
6.only關(guān)鍵詞
only用來指定某種特定的媒體類型柱锹，可以用來排除不支持媒體查詢的瀏覽器。其實only很多時候是用來對那些不支持Media Query但卻支持Media Type的設(shè)備隱藏樣式表的丰包。其主要有：支持媒體特性的設(shè)備禁熏，正常調(diào)用樣式，此時就當only不存在邑彪；表示不支持媒體特性但又支持媒體類型的設(shè)備瞧毙，這樣就會不讀樣式，因為其先會讀取only而不是screen寄症；另外不支持Media Queries的瀏覽器宙彪，不論是否支持only，樣式都不會被采用有巧。如
<linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />
在Media Query中如果沒有明確指定Media Type释漆，那么其默認為all，如：
<linkrel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />
另外在樣式中篮迎，還可以使用多條語句來將同一個樣式應(yīng)用于不同的媒體類型和媒體特性中男图，指定方式如下所示。
<linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
上面代碼中style.css樣式被用在寬度小于或等于480px的手持設(shè)備上甜橱，或者被用于屏幕寬度大于或等于960px的設(shè)備上逊笆。
到目前為止，CSS3 Media Queries得到了眾多瀏覽器支持岂傲，除了IE6-8瀏覽器不支持之外难裆，在所有現(xiàn)代瀏覽器中都可以完美支持。還有一個與眾不同的時譬胎，Media Queries在其他瀏覽器中不要像其他CSS3屬性一樣在不同的瀏覽器中添加前綴差牛。
