最近幾年，大螢幕手機和ipad等移動裝置的流行，使你的網頁相容移動裝置已成為一種流行！移動裝置的螢幕大小是五花八門，各式各樣！要想很好的相容移動裝置，Css3的media技術是功不可沒。

我的部落格，應用了CSS3的media技術，使其在手機等移動裝置上面也可以檢視。當然，只憑css3的media技術，做好手機網站是遠遠不夠的，手機網站注意事項和總結，後面會陸續出一些文章，歡迎持續關注！

好了，廢話少說，下面進入正題：

一、Css3的Media Queries 翻譯成中文是“媒體查詢”，有如下幾種引入方式：

1、直接head中引用，其實media在css2中已經存在，不過，他的主要作用您沒有關注，相容所有媒體等。你肯定見到過如下的寫法：

<linkhref="css/style.css"rel="stylesheet"type="text/css"media="all"/>

現在，我們為了相容螢幕的大小，可以這麼寫：

<linkrel="stylesheet"media="screen and (max-width: 600px)"href="smallscreen.css"/>

在螢幕最大是600px的時候載入“smallscreen.css”

2、@import 方式引用，這種方式的引用，要在style中，寫法如下：

<styletype="text/css"media="screen">或者寫成<
 
style type="text/css" media="screen and (max-width: 600px)">@import url("css/style.css");</style>

也就是在特定螢幕下載入style.css

3、我最常用的是第三種方法，也就是下面的這種方法：

@media screen and(max-width:600px){選擇器{屬性：屬性值；}}

直接在樣式中寫@media螢幕控制。

二、Media Queries的具體使用方式

1、最大寬度Max Width

<linkrel="stylesheet"media="screen and (max-width:600px)"
 
href="small.css"type="text/css"/>

上面表示的是：當螢幕小於或等於600px時，將採用small.css樣式來渲染Web頁面。

2、最小寬度Min Width

<linkrel="stylesheet"media="screen and (min-width:900px)"href="big.css"type="text/css"/>

上面表示的是：當螢幕大於或等於900px時，將採用big.css樣式來渲染Web頁面。

3、多個Media Queries使用

<linkrel="stylesheet"media="screen and (min-width:600px) and (max-width:900px)"href="style.css"type="text/css"/>

Media Query可以結合多個媒體查詢，換句話說，一個Media Query可以包含0到多個表示式，表示式又可以包含0到多個關鍵字，以及一種Media Type。正如上面的其表示的是當螢幕在600px-900px之間時採用style.css樣式來渲染web頁面。

4、裝置螢幕的輸出寬度Device Width

<linkrel="stylesheet"media="screen and (max-device-width: 480px)"href="iphone.css"type="text/css"/>

上面的程式碼指的是iphone.css樣式適用於最大裝置寬度為480px，比如說iPhone上的顯示，這裡的max-device-width所指的是裝置的實際解析度，也就是指可視面積分辨率

5、iPhone4

<linkrel="stylesheet"media="only screen and (-webkit-min-device-pixel-ratio: 2)"type="text/css"href="iphone4.css"/>

上面的樣式是專門針對iPhone4的移動裝置寫的。

6、iPad

<linkrel="stylesheet"media="all and (orientation:portrait)"href="portrait.css"type="text/css"/><linkrel="stylesheet"media="all and (orientation:landscape)"href="landscape.css"type="text/css"/>

在大數情況下，移動裝置iPad上的Safari和在iPhone上的是相同的，只是他們不同之處是iPad聲明瞭不同的方向，比如說上面的例子，在縱向(portrait)時採用portrait.css來渲染頁面；在橫向（landscape）時採用landscape.css來渲染頁面。

7、android

/*240px的寬度*/<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css"/>/*360px的寬度*/<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css"/>/*480px的寬度*/<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css"/>

我們可以使用media query為android手機在不同解析度提供特定樣式，這樣就可以解決螢幕解析度的不同給android手機的頁面重構問題。

8、not關鍵字

<linkrel="stylesheet"media="not print and (max-width: 1200px)"href="print.css"type="text/css"/>

not關鍵字是用來排除某種制定的媒體型別，換句話來說就是用於排除符合表示式的裝置。

9、only關鍵字

<linkrel="stylesheet"media="only screen and (max-device-width:240px)"href="android240.css"type="text/css"/>

only用來定某種特定的媒體型別，可以用來排除不支援媒體查詢的瀏覽器。其實only很多時候是用來對那些不支援Media Query但卻支援Media Type的裝置隱藏樣式表的。其主要有：支援媒體特性（Media Queries）的裝置，正常呼叫樣式，此時就當only不存在；對於不支援媒體特性(Media Queries)但又支援媒體型別(Media Type)的裝置，這樣就會不讀了樣式，因為其先讀only而不是screen；另外不支援Media Qqueries的瀏覽器，不論是否支援only，樣式都不會被採用。

10、其他

在Media Query中如果沒有明確指定Media Type，那麼其預設為all，如：

<linkrel="stylesheet"media="(min-width: 701px) and (max-width: 900px)"href="medium.css"type="text/css"/>

另外還有使用逗號（，）被用來表示並列或者表示或，如下

<linkrel="stylesheet"type="text/css"href="style.css"media="handheld and (max-width:480px), screen and (min-width:960px)"/>

上面程式碼中style.css樣式被用在寬度小於或等於480px的手持裝置上，或者被用於螢幕寬度大於或等於960px的裝置上。

總結：常用的Media Query總結起來有如下屬性： 

支援和不支援min 和max都在表中可以看出。

瀏覽器不相容IE7和IE8，具體相容情況如下：