您當(dāng)前位置：首頁(yè) > 互聯(lián)網(wǎng) > css @media的理解

css @media的理解

來(lái)源：程序員人生發(fā)布時(shí)間：2014-09-17 13:17:35 閱讀次數(shù)：3128次

css2的@media

css2里面雖然支持@media屬性，但是能實(shí)現(xiàn)的功能比較少，一般只用做打印的時(shí)候做特殊定義的CSS。
語(yǔ)法： @media sMedia { sRules }
說(shuō)明：
sMedia : 　指定設(shè)備名稱。請(qǐng)參閱附錄：設(shè)備類型
sRules : 　樣式表定義
指定樣式表規(guī)則用于指定的設(shè)備類型。請(qǐng)參閱link對(duì)象的media屬性（特性）。
示例：

// 設(shè)置顯示器用字體尺寸
@media screen{
BODY {font-size:12pt;
 }
}
// 設(shè)置打印機(jī)用字體尺寸
@media print{
@import "print.css"
BODY {font-size:8pt;}
}

css3的@media

@media 屬性在CSS3里面已經(jīng)演變成一種 media queries（媒體查詢/匹配）了,在CSS3里面，可以用查詢語(yǔ)句來(lái)匹配各種類型的屏幕。
語(yǔ)法：@media ： { sRules }
取值：

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

說(shuō)明：
判斷媒介(對(duì)象)類型來(lái)實(shí)現(xiàn)不同的展現(xiàn)。此特性讓CSS可以更精確作用于不同的媒介類型，同一媒介的不同條件（分辨率、色數(shù)等等）.

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 這些經(jīng)常在程序里面出現(xiàn)的邏輯判斷。
expression:表達(dá)式。媒體特征的匹配與否。
media_type:媒體的種類。包括了很多。
media_feature:媒體的特征。常用的是 min-width max-width 最小最大寬度的判斷。

DEMO（推薦在Chrome或者FIREFOX下打開(kāi)，打開(kāi)后，按快捷鍵“CTRL”+”+”,“CTRL”+”-”來(lái)縮放頁(yè)面）:
使用CSS3的@media來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)自適應(yīng)的效果圖

CSS代碼

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

HTML代碼

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