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

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

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

1
2
3

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

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

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

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

我們可以將上述語句稱為媒體查詢語句，這樣也更能理解一些。從上面的例子也可以看出，媒體查詢語句一般由media type+一到多個CSS屬性判斷組成，而多個CSS屬性判斷可以用關(guān)鍵字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){}

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

而針對多個媒體類型的CSS規(guī)則，可以用逗號來隔開：

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支持的屬性

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

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

瀏覽器擴展

webkit

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

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

firefox

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

max與min

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

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

not/only

媒體類型還支持 not和only關(guān)鍵字，它們可以用來更方便的定位某個媒體設(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大概從這個時候開始支持media query，但是對部分屬性比如projection支持不好)
• iPhone OS 3.2之前的版本不支持orientation屬性，iPad和iPhone 4支持該屬性。
• iPhone Safari不支持orientation(iPhone 4支持)

實例：

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

檢測iPhone safari：

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

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

Google的iPhone橫屏樣式：

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

1
2
3
4
5
6

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

android手機的多分辨率問題：

android系統(tǒng)的開放性導(dǎo)致其終端的多樣性，那么對于各種各樣的android手機來說，屏幕分辨率的差異導(dǎo)致針對android手機的頁面重構(gòu)復(fù)雜性增加，那么我們可以用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

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

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區(qū)分iPhone和iPad的方法

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

總結(jié)

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