Media Queries這功能是非常強大的，他可以讓你定制不同的分辨率和設備，並在不改變內容的情況下，讓你制作的web頁面在不同的分辨率和設備下都能顯示正常，並且不會因此而丟失樣式。
首先來看一個簡單的實例：
代碼如下:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
上面的media語句表示的是：當頁頁寬度小於或等於600px,調用small.css樣式表來渲染你的Web頁面。首先來看media的語句中包含的內容：
1、screen：這個不用說大家都知道，指的是一種媒體類型；
2、and：被稱為關鍵詞，與其相似的還有not,only，稍後會介紹；
3、（max-width:600px）：這個就是媒體特性，說得通俗一點就是媒體條件。
為了更能理解Media Query，我們在次回到前面的實例上：轉換成css中的寫法為：
代碼如下:
@media screen and (max-width: 600px) {
選擇器 {
屬性：屬性值；
}
}
其實就是把small.css文件中的樣式放在了@media srceen and (max-width;600px){…}的大括號之中。在語句上面的語句結構中，可以看出Media query和css的屬性集合很相似，主要區別在：
1、Media query只接受單個的邏輯表達式作為其值，或者沒有值；
2、css屬性用於聲明如何表現頁頁的信息；而Media Query是一個用於判斷輸出設備是否滿足某種條件的表達式；
3、Media Query其中的大部分接受min/max前綴，用來表示其邏輯關系，表示應用於大於等於或者小於等於某個值的情況
4、CSS屬性要求必須有屬性值，Media Query可以沒有值，因為其表達式返回的只有真或假兩種
下面我們一起來看看Media Queries的具體使用方式
一、最大寬度Max Width
代碼如下:
<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />
上面表示的是：當屏幕大於或等於900px時，將采用big.css樣式來渲染Web頁面。
二、多個Media Queries使用
代碼如下:
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />
Media Query可以結合多個媒體查詢，換句話說，一個Media Query可以包含0到多個表達式，表達式又可以包含0到多個關鍵字，以及一種Media Type。正如上面的其表示的是當屏幕在600px-900px之間時采用style.css樣式來渲染web頁面。
三、設備屏幕的輸出寬度Device Width
代碼如下:
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
上面的代碼指的是iphone.css樣式適用於最大設備寬度為480px，比如說iPhone上的顯示，這裡的max-device-width所指的是設備的實際分辨率，也就是指可視面積分辨率
我們可以使用media query為android手機在不同分辨率提供特定樣式，這樣就可以解決屏幕分辨率的不同給android手機的頁面重構問題。
四、not關鍵字
代碼如下:
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />
not關鍵字是用來排除某種制定的媒體類型，換句話來說就是用於排除符合表達式的設備。
五、only關鍵字
代碼如下:
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
only用來定某種特定的媒體類型，可以用來排除不支持媒體查詢的浏覽器。其實only很多時候是用來對那些不支持Media Query但卻支持Media Type的設備隱藏樣式表的。其主要有：支持媒體特性（Media Queries）的設備，正常調用樣式，此時就當only不存在；對於不支持媒體特性(Media Queries)但又支持媒體類型(Media Type)的設備，這樣就會不讀了樣式，因為其先讀only而不是screen；另外不支持Media Qqueries的浏覽器，不論是否支持only，樣式都不會被采用。
六、其他
在Media Query中如果沒有明確指定Media Type，那麼其默認為all，如：
代碼如下:
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />
另外還有使用逗號（，）被用來表示並列或者表示或，如下
代碼如下:
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
上面代碼中style.css樣式被用在寬度小於或等於480px的手持設備上，或者被用於屏幕寬度大於或等於960px的設備上。
關於Media Query的使用這一節就介紹到此，最後總體規納一下其功能，個人認為就是一句話：Media Queries能在不同的條件下使用不同的樣式，使用頁面達到不同的渲染效果。
效果演示，請用不同屏幕的電腦和手機等設備浏覽：http://hovertree.com/code/css/5ks0mbms.htm
總結代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3根據分辨率調用不同的樣式表 - 何問起</title><base target="_blank"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<link rel="stylesheet" id="HoverTreeCss" />
<link rel="stylesheet" media="screen and (max-width: 600px)" href="http://hovertree.com/texiao/js/16/hewenqi600.css" />
<link rel="stylesheet" media="screen and (min-width:601px) and (max-width:1366px)" href="http://hovertree.com/texiao/js/16/hewenqi1366.css" type="text/css" />
<link rel="stylesheet" media="screen and (min-width: 1367px)" href="http://hovertree.com/texiao/js/16/hewenqibig.css" type="text/css" />
<style>a{color:white}</style>
</head>
<body>
<div id="HewenqiInfo">根據屏幕寬度選用不同css文件,請用不同屏幕的電腦和手機等設備浏</div>
<div><a href="http://hoverteee.com">首頁</a> <a href="http://hoverteee.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/70rg4j0a.htm">原文</a> <a href="http://hovertree.com/texiao/js/16/" target="_blank">JS效果</a> <a href="http://hovertree.com/code/css/5ks0mbms.htm">復制代碼</a> </div>
</body>
</html>