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

media type

讓我們先了解一下media type，其實(shí)這個(gè)大家會(huì)比較熟悉一點(diǎn)，我們通常會(huì)用到的media type會(huì)是all 和screen，然后是print，一些網(wǎng)站會(huì)專門通過print類型為頁面的打印格式提供更友好的界面。
其實(shí)，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;

方法四

123

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

方法五

123

@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對(duì)media type的增強(qiáng)，事實(shí)上我們可以將media query看成是media type+css屬性判斷。

請(qǐng)注意，下面提到的一些關(guān)鍵字等內(nèi)容，有些是在media type中就可用的，但是放到media query中將能更好的發(fā)揮其作用，所以我就在適當(dāng)?shù)牡胤揭搿?/strong>

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

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

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

123

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

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

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

媒體查詢語句結(jié)構(gòu)

我們可以將上述語句稱為媒體查詢語句，這樣也更能理解一些。從上面的例子也可以看出，媒體查詢語句一般由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){}

當(dāng)然，請(qǐng)注意，有屬性值和沒有屬性值的情況代表的意義是不一樣的，所以上面的這兩條規(guī)則不是等價(jià)的。

而針對(duì)多個(gè)媒體類型的CSS規(guī)則，可以用逗號(hào)來隔開：

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就是為了更好的適配各種設(shè)備而生的。

瀏覽器擴(kuò)展

webkit

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

詳情請(qǐng)看這里：http://webkit.org/specs/MediaQueriesExtensions.html

firefox

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

max與min

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

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

not/only

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

not：排除某種制定的媒體類型

@media not print and (color){}

only：指定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器：

@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的內(nèi)核版本是522，iPhone 1代的safari的內(nèi)核版本是524，webkit大概從這個(gè)時(shí)候開始支持media query，但是對(duì)部分屬性比如projection支持不好)
• iPhone OS 3.2之前的版本不支持orientation屬性，iPad和iPhone 4支持該屬性。
• iPhone Safari不支持orientation(iPhone 4支持)

實(shí)例：

現(xiàn)在讓我們來看一些典型的例子：

檢測iPhone safari：

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

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

Google的iPhone橫屏樣式：

Google之前通過以下方式為iPhone手機(jī)提供橫屏樣式(因?yàn)樽钤绲?代iPhone手機(jī)不支持orientation屬性)：

123456

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

android手機(jī)的多分辨率問題：

android系統(tǒng)的開放性導(dǎo)致其終端的多樣性，那么對(duì)于各種各樣的android手機(jī)來說，屏幕分辨率的差異導(dǎo)致針對(duì)android手機(jī)的頁面重構(gòu)復(fù)雜性增加，那么我們可以用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可以用來適配特定屏幕長寬比的設(shè)備，這也是一個(gè)很有用的屬性，比如，我們的頁面想要對(duì)長寬比為4:3的普通屏幕定義一種樣式，然后對(duì)于16:9和16:10的寬屏，定義另一種樣式，比如自適應(yīng)寬度和固定寬度：

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

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

12345

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

O’Reilly區(qū)分iPhone和iPad的方法

O’Reilly為其網(wǎng)站制作了針對(duì)iPad和iPhone設(shè)備的不同版本，從而提供最適合相關(guān)設(shè)備閱讀的界面，他們的做法就是使用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">

詳細(xì)介紹可以查看這里：http://broadcast.oreilly.com/2010/04/using-css-media-queries-ipad.html

總結(jié)

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