media type(媒體類型)是css 2中的一個非常有用的屬性，通過media type我們可以對不同的設(shè)備指定特定的樣式，從而實現(xiàn)更豐富的界面。media query(媒體查詢)是對media type的一種增強，是CSS 3的重要內(nèi)容之一。隨著移動互聯(lián)網(wǎng)的發(fā)展，media query開始得到大家的重視。

media type
讓我們先了解一下media type，其實這個大家會比較熟悉一點，我們通常會用到的media type會是all 和screen，然后是print，一些網(wǎng)站會專門通過print類型為頁面的打印格式提供更友好的界面。
其實，media type有很多種：

media type的幾種使用方法
我們可以通過幾種方法來聲明media type：
方法一

<link href=”style.css” media=”screen print” …

方法二

<?xml-stylesheet media=”screen” href=”style.css”…

方法三

@import url(“style.css”) screen;

方法四

<style media=”screen”>
@import url(“style.css”);
</style>

方法五

@media screen{
selector{rules}
}

當(dāng)然，這幾種方法各有利弊，而我們常用的是第一種和最后一種方法。

media type的瀏覽器支持
IE5.5/6/7不支持在@import中使用媒體類型
Safari/firefox只支持all,screen,print三種類型(包括iphone)
Opera 完全支持
Opera mini 支持handheld，未指定則使用screen
Windows Mobile系統(tǒng)中的IE支持handheld，其它支持不明…

media query
正如前文所說，media query是CSS 3對media type的增強，事實上我們可以將media query看成是media type+css屬性判斷。
請注意，下面提到的一些關(guān)鍵字等內(nèi)容，有些是在media type中就可用的，但是放到media query中將能更好的發(fā)揮其作用，所以我就在適當(dāng)?shù)牡胤揭搿?
css屬性判斷可以只是某個CSS屬性的名稱，也可以是屬性+值：

<link rel=”stylesheet” media=”screen and (animation)” herf=“…”

如果設(shè)備支持CSS動畫，那么就能執(zhí)行這個外部樣式表文件。

@media screen and (max-width:240px){
body{font-size:medium;}