怎么在CSS3 中使用@media 實現網頁自適應

這期內容當中小編將會給大家帶來有關怎么在CSS3 中使用@media 實現網頁自適應，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

一、CSS2 中的@media

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

 @media sMedia { sRules }

1.1、示例

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

二、CSS3 中的@media

@media 屬性在CSS3里面已經演變成一種 media queries（媒體查詢/匹配）了,在CSS3里面，可以用查詢語句來匹配各種類型的屏幕。

語法：

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

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

2. media_query and | not | only 媒體查詢條件運算

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

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

2.1、示例

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

2.2、媒體特性

上述就是小編為大家分享的怎么在CSS3 中使用@media 實現網頁自適應了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。