如今，電腦顯示器的螢幕解析度向越來越大發展，而手機等移動裝置終端的解析度卻不可能大到哪裡去。越來越多的網站，開始讓自己的頁面自適合各種解析度，在小解析度下顯示基本的內容，在大解析度下顯示全部功能，甚至是分多等級的多版本。比如說我們熟悉的wordpress後臺，當螢幕解析度小於900px的時候，左邊的側欄就會變成收攏狀態（@media only screen and (max-width:900px)）。

這樣的好處：讓顧客得到最佳的網頁檢視；但是依然存在壞處：比如我自己的習慣喜歡在手機上查某些資料，某些網頁用手機開啟自適應後導致我要找的資料被隱藏了，比較煩躁。結論：請善用這種技術，比如前面wordpress後臺的例子，收攏狀態的側欄，依然可以被點選後展開，這就是一個完美的例子

不管怎麼樣，作為網站前端開發人員需要知道並且會用這種知識。這篇文章讓我們揭開 css 裡面 @media 屬性的神祕面紗，學習一下是如何實現的。

css2裡面的@media

@media 屬性在CSS2裡面已經存在，參見CSS2線上手冊-有愛一街版：@media sMedia { sRules } 屬性詳解，在這個說明頁面我們可以看到在css2裡面雖然支援@media屬性，但是能實現的功能比較少，一般只用做列印的時候做特殊定義的CSS。

語法： @media  sMedia { sRules }
說明： 
sMedia : 　指定裝置名稱。請參閱附錄：裝置型別
sRules : 　樣式表定義
指定樣式表規則用於指定的裝置型別。請參閱link物件的media屬性（特性）。
示例：
// 設定顯示器用字型尺寸
@media screen {
BODY {font-size:12pt; }
}
// 設定印表機用字型尺寸
@media print {
@import "print.css"
BODY {font-size:8pt;}
}

css3裡面的@media

@media 屬性在CSS3裡面已經演變成一種 media queries（媒體查詢/匹配）了，參見CSS3線上手冊-有愛一街版：media queries 詳解，在CSS3裡面，可以用查詢語句來匹配各種型別的螢幕。

語法：@media ：<sMedia> { sRules }
取值：
<sMedia>：
指定裝置名稱。請參閱附錄：裝置型別
{sRules}：
樣式表定義。
說明：
判斷媒介(物件)型別來實現不同的展現。此特性讓CSS可以更精確作用於不同的媒介型別，同一媒介的不同條件（解析度、色數等等）.
media_query: [only | not]? <media_type> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
| height | min-height | max-height
| device-width | min-device-width | max-device-width
| device-height | min-device-height | max-device-height
| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
| color | min-color | max-color
| color-index | min-color-index | max-color-index
| monochrome | min-monochrome | max-monochrome
| resolution | min-resolution | max-resolution
| scan | grid

解析

media_query 媒體查詢條件。包括了 only not and 這些經常在程式裡面出現的邏輯判斷。
expression 表示式。媒體特徵的匹配與否。
media_type 媒體的種類。包括了很多。
media_feature 媒體的特徵。常用的是 min-width max-width 最小最大寬度的判斷。

例項

說多了也不好理解，我們最方便從例項中學習怎麼運用。下面給出一個頁面例子，你可以從這個例子中看出，不同瀏覽器螢幕寬度、高度下的背景顏色的自動變換：

其中核心的css程式碼如下：

<style type="text/css">
body{background:blue;}
/*藍色 預設顏色只有當下麵條件都不匹配的時候，即寬度500px-800px之間+高度100px-400px之間*/
@media screen and (max-width:500px){body{background:green;}}
/*寬度小於500px時 綠色*/
@media screen and (min-width:800px){body{background:red;}}
/*寬度大於800px時 紅色*/
@media screen and (max-height:100px){body{background:yellow;}}
/*高度小於100px時 黃色*/
@media screen and (min-height:400px){body{background:pink;}}
/*高度大於400px時 粉色*/
</style>

從上面的例項可以看出，要小於的時候用max，要大於的時候用min，邏輯是正好相反的，大家注意一下。

擴充套件總結

有了媒體匹配查詢的CSS3功能之後，你就可以在一個頁面上定義多套顯示風格了，非常好用方便。

但是低階版本的IE不支援怎麼辦？誰去管它呢？你有預設的一套風格都支援就好了啊，一般手機上的瀏覽器都是webkit的核心，這些東西都是相容的。所以這麼好用的一個屬性，大家都喜歡用。