您當前位置：首頁 > 互聯網 > css @media的理解

css @media的理解

來源：程序員人生發布時間：2014-09-17 13:17:35 閱讀次數：3136次

css2的@media

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 ： { sRules }
取值：

1 2	`<sMedia>：指定設備名稱。` `{sRules}：樣式表定義。`

說明：
判斷媒介(對象)類型來實現不同的展現。此特性讓CSS可以更精確作用于不同的媒介類型，同一媒介的不同條件（分辨率、色數等等）.

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”+”-”來縮放頁面）:
使用CSS3的@media來實現網頁自適應的效果圖

CSS代碼

body{background:blue;}/*寬度500px-800px之間+高度100px-400px之間
 藍色*/
@media screenand (max-width:500px){body{background:green;}}/*寬度小于500px時
 綠色*/
@media screenand (min-width:800px){body{background:red;}}/*寬度大于800px時
 紅色*/
@media screenand (max-height:100px){body{background:yellow;}}/*高度小于100px時
 黃色*/
@media screenand (min-height:400px){body{background:pink;}}/*高度大于400px時
 粉色*/

HTML代碼

<p>效果演示，請縮小/擴大瀏覽器的窗口大小注意背景色的變化。邏輯如下：</p>
<p>/*寬度500px-800px之間+高度100px-400px之間 藍色*/</p>
<p>/*寬度小于500px時 綠色*/</p>
<p>/*寬度大于800px時 紅色*/</p>
<p>/*高度小于100px時 黃色*/</p>
<p>/*高度大于400px時 粉色*/</p>