媒體查詢?nèi)绾问褂茫?/b>
一鸟悴、背景介紹
在 CSS2 中，你可以為不同的媒介設(shè)備（如屏幕卵皂、打印機(jī)）指定專用的樣式表悼粮，而現(xiàn)在借助 CSS3 的媒體查詢（Media Queries） 特性闲勺，可以更為有效的實(shí)現(xiàn)這個(gè)功能。你可以為媒介類型添加某些條件扣猫，檢測設(shè)備并采用不同的樣式表菜循。
二、知識(shí)刨析
媒體查詢 可以針對不同的屏幕尺寸設(shè)置不同的樣式申尤，特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁面癌幕，媒體查詢 是非常有用的。當(dāng)你重置瀏覽器大小的過程中昧穿，頁面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁面勺远。
在CSS3中我們可以設(shè)置不同類型的媒體條件，并根據(jù)對應(yīng)的條件时鸵，給相應(yīng)符合條件的媒體調(diào)用相對應(yīng)的樣式表〗悍辏現(xiàn)在最常見的一個(gè)例子，你可以同時(shí)給PC機(jī)的大屏幕和移動(dòng)設(shè)備設(shè)置不同的樣式表饰潜。這功能是非常強(qiáng)大的初坠，他可以讓你定制不同的分辨率和設(shè)備，并在不改變內(nèi)容的情況下囊拜，讓你制作的web頁面在不同的分辨率和設(shè)備下都能顯示正常，并且不會(huì)因此而丟失樣式比搭。
首先來看一個(gè)簡單的實(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è)非常有用的屬性，可以通過媒體類型對不同的設(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屬性，如果你對此兩個(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ū)別
鳴謝！
感謝大家的閱讀凌箕！
