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

media type

讓我們先了解一下media type，其實(shí)這個(gè)大家會(huì )比較熟悉一點(diǎn)，我們通常會(huì )用到的media type會(huì )是all 和screen，然后是print，一些網(wǎng)站會(huì )專(zhuān)門(mén)通過(guò)print類(lèi)型為頁(yè)面的打印格式提供更友好的界面。
其實(shí)，media type有很多種：

media type的幾種使用方法

我們可以通過(guò)幾種方法來(lái)聲明media type：

方法一

<link href="style.css" media="screen print" ...

方法二

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

方法三

@import url("style.css") screen;

方法四

123

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

方法五

123

@media screen{selector{rules}}

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

media type的瀏覽器支持

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

media query

正如前文所說(shuō)，media query是CSS 3對media type的增強，事實(shí)上我們可以將media query看成是media type+css屬性判斷。

請注意，下面提到的一些關(guān)鍵字等內容，有些是在media type中就可用的，但是放到media query中將能更好的發(fā)揮其作用，所以我就在適當的地方引入。

css屬性判斷可以只是某個(gè)CSS屬性的名稱(chēng)，也可以是屬性+值：

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

如果設備支持CSS動(dòng)畫(huà)，那么就能執行這個(gè)外部樣式表文件。

123

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

如果設備的瀏覽器的最大寬度是240px，則頁(yè)面將使用中號字體。

PS:屬性和值之間是用冒號連接的，而不是等號，這與正常的CSS的寫(xiě)法一致。

媒體查詢(xún)語(yǔ)句結構

我們可以將上述語(yǔ)句稱(chēng)為媒體查詢(xún)語(yǔ)句，這樣也更能理解一些。從上面的例子也可以看出，媒體查詢(xún)語(yǔ)句一般由media type+一到多個(gè)CSS屬性判斷組成，而多個(gè)CSS屬性判斷可以用關(guān)鍵字and連接：

123

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

其中media type可以省略，屬性值也可以為空：

@media (color:4){}

@media (color){}

當然，請注意，有屬性值和沒(méi)有屬性值的情況代表的意義是不一樣的，所以上面的這兩條規則不是等價(jià)的。

而針對多個(gè)媒體類(lèi)型的CSS規則，可以用逗號來(lái)隔開(kāi)：

123

@media handheld and (min-width:360px),screen and (min-width:480px){body{font-size:large;}}

123

@media screen and (min-width:800px),print and (min-width:7in){body{font-size:small;}}

media query支持的屬性

事實(shí)上，media query支持的屬性和我們常用的CSS屬性是不太一樣的，它們是一些特別定義的條目：

從這些屬性中我們可以看出，media query就是為了更好的適配各種設備而生的。

瀏覽器擴展

webkit

webkit是最早實(shí)現media query支持的瀏覽器內核之一，同時(shí)它也根據自己的需要搞了一些特有的擴展屬性，最常用的有：

詳情請看這里：http://webkit.org/specs/MediaQueriesExtensions.html

firefox

firefox也提供一些自己的擴展，不過(guò)由于firefox瀏覽器的手機版現在還很弱，所以很少會(huì )用到，感興趣的同學(xué)可以到https://developer.mozilla.org/En/CSS/Media_queries查閱。

max與min

細心的同學(xué)可能已經(jīng)注意到前面用到的這兩個(gè)關(guān)鍵詞，他們是要配合支持它們的屬性使用的，它們的意義與我們常用的max-width和minwidth等類(lèi)似。

各屬性對max和min的支持在前面的屬性列表中有給出，這里是一個(gè)詳細的列表：

not/only

媒體類(lèi)型還支持 not和only關(guān)鍵字，它們可以用來(lái)更方便的定位某個(gè)媒體設備：

not：排除某種制定的媒體類(lèi)型

@media not print and (color){}

only：指定某種特定的媒體類(lèi)型，可以用來(lái)排除不支持媒體查詢(xún)的瀏覽器：

@media only screen and (color){}

media query的瀏覽器支持：

• IE 9以下不支持
• Firefox 3.5+(Gecko 1.9.1+)支持
• Opera 9.5+完全支持
• Opera mini 5支持
• webkit 支持大部分屬性(safari 3.0的內核版本是522，iPhone 1代的safari的內核版本是524，webkit大概從這個(gè)時(shí)候開(kāi)始支持media query，但是對部分屬性比如projection支持不好)
• iPhone OS 3.2之前的版本不支持orientation屬性，iPad和iPhone 4支持該屬性。
• iPhone Safari不支持orientation(iPhone 4支持)

實(shí)例：

現在讓我們來(lái)看一些典型的例子：

檢測iPhone safari：

<link media="only screen and (max-device-width: 480px)" href="style.css">

這是apple官方網(wǎng)站推薦的一種定位iPhone safari瀏覽器的方法，在iPhone一代和2代的時(shí)代，這條規則的確能夠正確的判斷出iPhone的瀏覽器，但是后來(lái)出現了Android的大屏幕手機，比如Nexus One和HTC desire，這條規則也能適配這些480px寬度的機器。

Google的iPhone橫屏樣式：

Google之前通過(guò)以下方式為iPhone手機提供橫屏樣式(因為最早的3代iPhone手機不支持orientation屬性)：

123456

@media screen and (max-height:300px){    #linksDiv{        margin-top:10px;    }    ...}

android手機的多分辨率問(wèn)題：

android系統的開(kāi)放性導致其終端的多樣性，那么對于各種各樣的android手機來(lái)說(shuō)，屏幕分辨率的差異導致針對android手機的頁(yè)面重構復雜性增加，那么我們可以用media query為每種分辨率提供特定樣式：

1234567891011121314151617

/* 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

device-aspect-ratio可以用來(lái)適配特定屏幕長(cháng)寬比的設備，這也是一個(gè)很有用的屬性，比如，我們的頁(yè)面想要對長(cháng)寬比為4:3的普通屏幕定義一種樣式，然后對于16:9和16:10的寬屏，定義另一種樣式，比如自適應寬度和固定寬度：

1234567891011

/* 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{    }}

當然，對于手機也可以使用這個(gè)屬性，比如對于480px*800px的Nexus One和Desire等手機，可以用下面的樣式來(lái)匹配：

12345

/* for 480px*800px width screen */@media only screen (device-aspect-ratio:5/3){    selector{    }}

O’Reilly區分iPhone和iPad的方法

O’Reilly為其網(wǎng)站制作了針對iPad和iPhone設備的不同版本，從而提供最適合相關(guān)設備閱讀的界面，他們的做法就是使用media query：

1234

<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是一個(gè)很強大也很好用的工具，它為我們在不同的設備和環(huán)境下實(shí)現豐富的界面提供了一種快捷方法，雖然現在各個(gè)瀏覽器對它的支持還有些差異，但是大家都在改進(jìn)，IE 9已經(jīng)開(kāi)始支持media query了。不過(guò)目前media query的最大舞臺是在高端手持設備，相信隨著(zhù)移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展，media query也會(huì )很好發(fā)揮自己的作用。