媒體查詢?nèi)绾问褂茫?/b>
一、背景介紹
在 CSS2 中，你可以為不同的媒介設(shè)備（如屏幕、打印機(jī)）指定專用的樣式表，而現(xiàn)在借助 CSS3 的媒體查詢（Media Queries） 特性，可以更為有效的實(shí)現(xiàn)這個(gè)功能。你可以為媒介類型添加某些條件，檢測(cè)設(shè)備并采用不同的樣式表。
二、知識(shí)刨析
媒體查詢 可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁面，媒體查詢 是非常有用的。當(dāng)你重置瀏覽器大小的過程中，頁面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁面。
在CSS3中我們可以設(shè)置不同類型的媒體條件，并根據(jù)對(duì)應(yīng)的條件，給相應(yīng)符合條件的媒體調(diào)用相對(duì)應(yīng)的樣式表?，F(xiàn)在最常見的一個(gè)例子，你可以同時(shí)給PC機(jī)的大屏幕和移動(dòng)設(shè)備設(shè)置不同的樣式表。這功能是非常強(qiáng)大的，他可以讓你定制不同的分辨率和設(shè)備，并在不改變內(nèi)容的情況下，讓你制作的web頁面在不同的分辨率和設(shè)備下都能顯示正常，并且不會(huì)因此而丟失樣式。
首先來看一個(gè)簡(jiǎn)單的實(shí)例：
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
上面的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 Type)在css中是一個(gè)常見的屬性，也是一個(gè)非常有用的屬性，可以通過媒體類型對(duì)不同的設(shè)備指定不同的樣式，在css中我們常碰到的就是all（全部）,screen（屏幕）,print（頁面打印或打印預(yù)覽模式）,其實(shí)在媒體類型不止這三種，w3c總共列出了10種媒體類型。
not關(guān)鍵字是用來排除某種制定的媒體類型，換句話來說就是用于排除符合表達(dá)式的設(shè)備。
only關(guān)鍵字用來指定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器。
三、編碼實(shí)戰(zhàn)
CSS3 Media寫法，我們先來看下下面這段代碼，估計(jì)很多人在響應(yīng)式的網(wǎng)站CSS很經(jīng)?？吹筋愃葡旅娴倪@段代碼：
@media screen and (max-width: 768px){
body{
background: #000;
}
}
這個(gè)應(yīng)該算是一個(gè)media的一個(gè)標(biāo)準(zhǔn)寫法，上面這段CSS代碼意思是：當(dāng)頁面小于768px的時(shí)候執(zhí)行它下面的CSS。
然后就是當(dāng)瀏覽器尺寸大于768px時(shí)候的代碼了：
@media screen and (min-width:768px){
body{
background: #000;
}
}
我們還可以混合使用上面的用法：
@media screen and (min-width:768px) and (max-width:960px){
body{
background:yellow;
}
}
上面的這段代碼的意思是當(dāng)頁面寬度大于768px小于960px的時(shí)候執(zhí)行下面的CSS。
四、擴(kuò)展思考
max(min)-device-width和max(min)-width的區(qū)別；
在網(wǎng)頁自適應(yīng)設(shè)計(jì)中，max-device-width和max-width是不可缺少的兩大CSS屬性，如果你對(duì)此兩個(gè)屬性有了充分的認(rèn)識(shí)之后，你或許把網(wǎng)頁的自適應(yīng)設(shè)計(jì)得更為極致一些。
max-device-width和max-width是有區(qū)別的，表現(xiàn)在如下幾個(gè)方面：
1、max-device-width是設(shè)備整個(gè)顯示區(qū)域的寬度，例如，真實(shí)的設(shè)備屏幕寬度。
2、max-width是目標(biāo)顯示區(qū)域的寬度，例如，瀏覽器寬度。
3、如果使用max-device-width，那么在PC瀏覽器上瀏覽網(wǎng)頁時(shí)，縮小或放大瀏覽器時(shí)是不執(zhí)行CSS的，因?yàn)椤癙C設(shè)備”沒有變化。但如果使用max-width，縮小或放大瀏覽器時(shí)是執(zhí)行CSS的，因?yàn)椤帮@示區(qū)域”即瀏覽器大小發(fā)生了變化。
4、如果使用max-device-width，那么當(dāng)手機(jī)由豎變橫時(shí)，CSS是不執(zhí)行的，因?yàn)椤笆謾C(jī)寬度”并沒有變化。如果使用max-width，那么當(dāng)手機(jī)由豎變橫時(shí)，CSS是執(zhí)行的，因?yàn)椤帮@示區(qū)域”發(fā)生了變化。
5、通常，面向“移動(dòng)設(shè)備”用戶使用max-device-width；面向“PC設(shè)備”用戶使用max-width。
五、參考文獻(xiàn)
max-device-width和max-width的區(qū)別
鳴謝！
感謝大家的閱讀！
