怎么在CSS3 中使用@media 實(shí)現(xiàn)網(wǎng)頁自適應(yīng)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)怎么在CSS3 中使用@media 實(shí)現(xiàn)網(wǎng)頁自適應(yīng)，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

一、CSS2 中的@media

css2里面雖然支持@media屬性，但是能實(shí)現(xiàn)的功能比較少，一般只用做打印的時(shí)候做特殊定義的CSS。

 @media sMedia { sRules }

1.1、示例

// 設(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里面，可以用查詢語句來匹配各種類型的屏幕。

語法：

@media mediatype and|not|only (media feature) {
CSS-sRules;
}

1. mediatype 媒體類型：all,print(打印機(jī))、screen(電腦屏幕、手機(jī)等)、speech(屏幕閱讀器等設(shè)備)

2. media_query and | not | only 媒體查詢條件運(yùn)算

3. media_feature 媒體特征，如最大寬度和最小寬度。

判斷媒介(對(duì)象)類型來實(shí)現(xiàn)不同的展現(xiàn)。此特性讓CSS可以更精確作用于不同的媒介類型。

2.1、示例

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

2.2、媒體特性

上述就是小編為大家分享的怎么在CSS3 中使用@media 實(shí)現(xiàn)網(wǎng)頁自適應(yīng)了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。