css中(zhōng)@media 的用法

1、head标簽中(zhōng)引入

語法： @media mediatype and | not | only (media feature) { css-code; }
也可以針對不同的媒體(tǐ)使用不同的stylesheets:
<!--<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">-->
<link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)">
上面将浏覽器寬度小(xiǎo)于等于800px時，應用 styleA 。

2、css中(zhōng)引入

@media screen and (max-device-width:960px){
body{background:red;}
}
上面是在設備屏幕寬度小(xiǎo)于等于960px時應用css樣式。

混用：

@media screen and (min-width:960px) and (max-width:1200px){
body{background:yellow;}
}
表示浏覽器寬度大(dà)于等于960px且小(xiǎo)于等于1200px時使用樣式。

======================================================================

3、Media所有參數彙總

width:浏覽器可視寬度。
height:浏覽器可視高度。
device-width:設備屏幕的寬度。
device-height:設備屏幕的高度。
orientation:檢測設備目前處于橫向還是縱向狀态。
aspect-ratio:檢測浏覽器可視寬度和高度的比例。(例如：aspect-ratio:16/9)
device-aspect-ratio:檢測設備的寬度和高度的比例。
color:檢測顔色的位數。（例如：min-color:32就會檢測設備是否擁有32位顔色）
color-index:檢查設備顔色索引表中(zhōng)的顔色，他的值不能是負數。
monochrome:檢測單色楨緩沖區域中(zhōng)的每個像素的位數。（這個太高級，估計咱很少會用的到）
resolution:檢測屏幕或打印機的分(fēn)辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
grid:檢測輸出的設備是網格的還是位圖設備。

值       描述
aspect-ratio      定義輸出設備中(zhōng)的頁面可見區域寬度與高度的比率
color       定義輸出設備每一(yī)組彩色原件的個數。如果不是彩色設備，則值等于0
color-index      定義在輸出設備的彩色查詢表中(zhōng)的條目數。如果沒有使用彩色查詢表，則值等于0
device-aspect-ratio      定義輸出設備的屏幕可見寬度與高度的比率。
device-height      定義輸出設備的屏幕可見高度。
device-width      定義輸出設備的屏幕可見寬度。
grid      用來查詢輸出設備是否使用栅格或點陣。
height      定義輸出設備中(zhōng)的頁面可見區域高度。
max-aspect-ratio      定義輸出設備的屏幕可見寬度與高度的最大(dà)比率。
max-color      定義輸出設備每一(yī)組彩色原件的最大(dà)個數。
max-color-index      定義在輸出設備的彩色查詢表中(zhōng)的最大(dà)條目數。
max-device-aspect-ratio      定義輸出設備的屏幕可見寬度與高度的最大(dà)比率。
max-device-height      定義輸出設備的屏幕可見的最大(dà)高度。
max-device-width      定義輸出設備的屏幕最大(dà)可見寬度。
max-height      定義輸出設備中(zhōng)的頁面最大(dà)可見區域高度。
max-monochrome      定義在一(yī)個單色框架緩沖區中(zhōng)每像素包含的最大(dà)單色原件個數。
max-resolution      定義設備的最大(dà)分(fēn)辨率。
max-width      定義輸出設備中(zhōng)的頁面最大(dà)可見區域寬度。
min-aspect-ratio      定義輸出設備中(zhōng)的頁面可見區域寬度與高度的最小(xiǎo)比率。
min-color      定義輸出設備每一(yī)組彩色原件的最小(xiǎo)個數。
min-color-index      定義在輸出設備的彩色查詢表中(zhōng)的最小(xiǎo)條目數。
min-device-aspect-ratio      定義輸出設備的屏幕可見寬度與高度的最小(xiǎo)比率。
min-device-width      定義輸出設備的屏幕最小(xiǎo)可見寬度。
min-device-height      定義輸出設備的屏幕的最小(xiǎo)可見高度。
min-height      定義輸出設備中(zhōng)的頁面最小(xiǎo)可見區域高度。
min-monochrome      定義在一(yī)個單色框架緩沖區中(zhōng)每像素包含的最小(xiǎo)單色原件個數
min-resolution      定義設備的最小(xiǎo)分(fēn)辨率。
min-width      定義輸出設備中(zhōng)的頁面最小(xiǎo)可見區域寬度。
monochrome      定義在一(yī)個單色框架緩沖區中(zhōng)每像素包含的單色原件個數。如果不是單色設備，則值等于0
orientation      定義輸出設備中(zhōng)的頁面可見區域高度是否大(dà)于或等于寬度（橫豎屏）。
resolution      定義設備的分(fēn)辨率。如：96dpi, 300dpi, 118dpcm
scan      定義電視類設備的掃描工(gōng)序。
width      定義輸出設備中(zhōng)的頁面可見區域寬度。
(max-width:599px)
(min-width:600px)
(orientation:portrait) 豎屏
(orientation:landscape) 橫屏
(-webkit-min-device-pixel-ratio: 2) 像素比
4、媒體(tǐ)類型

值      描述
all      用于所有設備
aural      已廢棄。用于語音和聲音合成器
braille      已廢棄。 應用于盲文觸摸式反饋設備
embossed      已廢棄。 用于打印的盲人印刷設備
handheld      已廢棄。 用于掌上設備或更小(xiǎo)的裝置，如PDA和小(xiǎo)型電話(huà)
print      用于打印機和打印預覽
projection      已廢棄。 用于投影設備
screen      用于電腦屏幕，平闆電腦，智能手機等。
speech      應用于屏幕閱讀器等發聲設備
tty      已廢棄。 用于固定的字符網格，如電報、終端設備和對字符有限制的便攜設備
tv      已廢棄。 用于電視和網絡電視
5、關鍵字

and

not：該關鍵字是用來排除某種制定的媒體(tǐ)類型

only：用來定某種特定的媒體(tǐ)類型，可以用來排除不支持媒體(tǐ)查詢的浏覽器。其實only很多時候是用來對那些不支持Media Query但卻支持Media Type的設備隐藏樣式表的。其主要有：支持媒體(tǐ)特性（Media Queries）的設備，正常調用樣式，此時就當only不存在；對于不支持媒體(tǐ)特性(Media Queries)但又(yòu)支持媒體(tǐ)類型(Media Type)的設備，這樣就會不讀了樣式，因爲其先讀only而不是screen；另外(wài)不支持Media Qqueries的浏覽器，不論是否支持only，樣式都不會被采用。