media type(媒體類型)是css 2中的一個非常有用的屬性，通過media type我們可以對不同的設備指定特定的樣式，從而實現更豐富的界面。media query(媒體查詢)是對media type的一種增強，是CSS 3的重要內容之一。隨著移動互聯網的發展，media query開始得到大家的重視。
讓我們先了解一下media type，其實這個大家會比較熟悉一點，我們通常會用到的media type會是all 和screen，然後是print，一些網站會專門通過print類型為頁面的打印格式提供更友好的界面。
其實，media type有很多種：
我們可以通過幾種方法來聲明media type：
<link href="style.css" media="screen print" ...
<?xml-stylesheet media="screen" href="style.css"...
@import url("style.css") screen;
1 2 3
<style media="screen">
@import url("style.css");
</style>
1 2 3
@media screen{
selector{rules}
}
當然，這幾種方法各有利弊，而我們常用的是第一種和最後一種方法。
正如前文所說，media query是CSS 3對media type的增強，事實上我們可以將media query看成是media type+css屬性判斷。
請注意，下面提到的一些關鍵字等內容，有些是在media type中就可用的，但是放到media query中將能更好的發揮其作用，所以我就在適當的地方引入。
css屬性判斷可以只是某個CSS屬性的名稱，也可以是屬性+值：
<link rel="stylesheet" media="screen and (animation)” herf=“…”
如果設備支持CSS動畫，那麼就能執行這個外部樣式表文件。
1 2 3
@media screen and (max-width:240px){
body{font-size:medium;}
}
如果設備的浏覽器的最大寬度是240px，則頁面將使用中號字體。
PS:屬性和值之間是用冒號連接的，而不是等號，這與正常的CSS的寫法一致。
我們可以將上述語句稱為媒體查詢語句，這樣也更能理解一些。從上面的例子也可以看出，媒體查詢語句一般由media type+一到多個CSS屬性判斷組成，而多個CSS屬性判斷可以用關鍵字and連接：
1 2 3
@media screen and (min-width:1024px) and (max-width:1280px){
body{font-size:medium;}
}
其中media type可以省略，屬性值也可以為空：
@media (color:4){}
@media (color){}
當然，請注意，有屬性值和沒有屬性值的情況代表的意義是不一樣的，所以上面的這兩條規則不是等價的。
而針對多個媒體類型的CSS規則，可以用逗號來隔開：
1 2 3
@media handheld and (min-width:360px),screen and (min-width:480px){
body{font-size:large;}
}
1 2 3
@media screen and (min-width:800px),print and (min-width:7in){
body{font-size:small;}
}
事實上，media query支持的屬性和我們常用的CSS屬性是不太一樣的，它們是一些特別定義的條目：
從這些屬性中我們可以看出，media query就是為了更好的適配各種設備而生的。
webkit是最早實現media query支持的浏覽器內核之一，同時它也根據自己的需要搞了一些特有的擴展屬性，最常用的有：
transform-2d 只用於支持使用 -webkit-transform實現2D變換的浏覽器 transform-3d 只用於支持使用 -webkit-transform實現3D變換的浏覽器 transition 只用於支持使用-webkit-transition實現變換效果的浏覽器 animation 只用於支持使用-webkit-animation實現動畫的浏覽器詳情請看這裡：http://webkit.org/specs/MediaQueriesExtensions.html
firefox也提供一些自己的擴展，不過由於firefox浏覽器的手機版現在還很弱，所以很少會用到，感興趣的同學可以到https://developer.mozilla.org/En/CSS/Media_queries查閱。
細心的同學可能已經注意到前面用到的這兩個關鍵詞，他們是要配合支持它們的屬性使用的，它們的意義與我們常用的max-width和minwidth等類似。
各屬性對max和min的支持在前面的屬性列表中有給出，這裡是一個詳細的列表：
height min-height max-height device-width min-device-width max-device-width device-height min-device-height max-device-height aspect-ratio min-aspect-ratio max-aspect-ratio device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio color min-color max-color color-index min-color-index max-color-index Monochrome min-monochrome max-monochrome Resolution min-resolution max-resolution媒體類型還支持 not和only關鍵字，它們可以用來更方便的定位某個媒體設備：
not：排除某種制定的媒體類型
@media not print and (color){
}
only：指定某種特定的媒體類型，可以用來排除不支持媒體查詢的浏覽器：
@media only screen and (color){
}
現在讓我們來看一些典型的例子：
<link media="only screen and (max-device-width: 480px)" href="style.css">
這是apple官方網站推薦的一種定位iPhone safari浏覽器的方法，在iPhone一代和2代的時代，這條規則的確能夠正確的判斷出iPhone的浏覽器，但是後來出現了Android的大屏幕手機，比如Nexus One和HTC desire，這條規則也能適配這些480px寬度的機器。
Google之前通過以下方式為iPhone手機提供橫屏樣式(因為最早的3代iPhone手機不支持orientation屬性)：
1 2 3 4 5 6
@media screen and (max-height:300px){
#linksDiv{
margin-top:10px;
}
...
}
android系統的開放性導致其終端的多樣性，那麼對於各種各樣的android手機來說，屏幕分辨率的差異導致針對android手機的頁面重構復雜性增加，那麼我們可以用media query為每種分辨率提供特定樣式：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
/* for 240 px width screen */
@media only screen and (max-device-width:240px){
selector{
}
}
/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){
selector{
}
}
/* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){
selector{
}
}
device-aspect-ratio可以用來適配特定屏幕長寬比的設備，這也是一個很有用的屬性，比如，我們的頁面想要對長寬比為4:3的普通屏幕定義一種樣式，然後對於16:9和16:10的寬屏，定義另一種樣式，比如自適應寬度和固定寬度：
1 2 3 4 5 6 7 8 9 10 11
/* for 4:3 screen */
@media only screen and (device-aspect-ratio:4/3){
selector{
}
}
/* for 16:9 and 16:10 screen */
@media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){
selector{
}
}
當然，對於手機也可以使用這個屬性，比如對於480px*800px的Nexus One和Desire等手機，可以用下面的樣式來匹配：
1 2 3 4 5
/* for 480px*800px width screen */
@media only screen (device-aspect-ratio:5/3){
selector{
}
}
O’Reilly為其網站制作了針對iPad和iPhone設備的不同版本，從而提供最適合相關設備閱讀的界面，他們的做法就是使用media query：
1 2 3 4
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"> <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css"> <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">
詳細介紹可以查看這裡：http://broadcast.oreilly.com/2010/04/using-css-media-queries-ipad.html
CSS 3的media query是一個很強大也很好用的工具，它為我們在不同的設備和環境下實現豐富的界面提供了一種快捷方法，雖然現在各個浏覽器對它的支持還有些差異，但是大家都在改進，IE 9已經開始支持media query了。不過目前media query的最大舞台是在高端手持設備，相信隨著移動互聯網的快速發展，media query也會很好發揮自己的作用。