如今，電腦顯示器的螢幕解析度向越來越大發展，而手機等移動裝置終端的解析度卻不可能大到**去。越來越多的**，開始讓自己的頁面自適合各種解析度，在小解析度下顯示基本的內容，在大解析度下顯示全部功能，甚至是分多等級的多版本。
作為web前端開發人員需要知道並且會用這種知識。
css2裡面雖然支援@media屬性，但是能實現的功能比較少，一般只用做列印的時候做特殊定義的css。
語法： @media smedia
說明：smedia : 指定裝置名稱。請參閱附錄：裝置型別
srules : 樣式表定義
指定樣式表規則用於指定的裝置型別。請參閱link物件的media屬性（特性）。
示例：1
2
3
4
5
6
7
8
9
// 設定顯示器用字型尺寸
@mediascreen
}
// 設定印表機用字型尺寸
@mediaprint
}
@media 屬性在css3裡面已經演變成一種 media queries（**查詢/匹配）了,在css3裡面，可以用查詢語句來匹配各種型別的螢幕。
語法：@media ：
取值：1
2
：指定裝置名稱。
：樣式表定義。
說明：判斷媒介(物件)型別來實現不同的展現。此特性讓css可以更精確作用於不同的媒介型別，同一媒介的不同條件（解析度、色數等等）.
01
02
03
04
05
06
07
08
09
10
11
12
13
media_query: [only | not]? [ and ]*
expression: ( [: ]? )
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 最小最大寬度的判斷。
demo（推薦在chrome或者firefox下開啟，開啟後，按快捷鍵「ctrl」+」+」,「ctrl」+」-」來縮放頁面）:
1
2
3
4
5
body/*寬度500px-800px之間+高度100px-400px之間 藍色*/
@mediascreenand (max-width:500px)}/*寬度小於500px時 綠色*/
@mediascreenand (min-width:800px)}/*寬度大於800px時 紅色*/
@mediascreenand (max-height:100px)}/*高度小於100px時 黃色*/
@mediascreenand (min-height:400px)}/*高度大於400px時 粉色*/
1
2
3
4
5
6
<p>效果演示，請縮小/擴大瀏覽器的視窗大小注意背景色的變化。邏輯如下：
<p>/*寬度500px-800px之間+高度100px-400px之間 藍色*/
<p>/*寬度小於500px時 綠色*/
<p>/*寬度大於800px時 紅色*/
<p>/*高度小於100px時 黃色*/
<p>/*高度大於400px時 粉色*/
詳解使用CSS3的 media來編寫響應式的頁面
首先要知道，我們為什麼要寫自適應的頁面 響應式頁面 眾所周知，電腦 平板 手機的螢幕是差距很大的，假如在電腦上寫好了乙個頁面，在電腦上看起來不錯，但是如果放到手機上的話，那可能就會亂的一塌糊塗，這時候怎麼解決呢？以前，可以再專門為手機定製乙個頁面，當使用者訪問的時候，判斷裝置是手機還是電腦，如果是手...
使用CSS3的 media來編寫響應式的頁面
直接看乾貨 定義和使用 使用 media 查詢，你可以針對不同的螢幕大小定義不同的樣式。media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面，這對除錯來說是乙個極大的便...
使用CSS3的 media來編寫響應式的頁面
定義和使用 使用 media 查詢，你可以針對不同的螢幕大小定義不同的樣式。media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面，這對除錯來說是乙個極大的便利。css ...