使用 CSS3 中@media 實現(xiàn)網(wǎng)頁自適應的示例代碼
發(fā)布時間：2020-03-24 15:09:03 作者：ADMIN 
我要評論
我要評論這篇文章主要介紹了使用 CSS3 中@media 實現(xiàn)網(wǎng)頁自適應的示例代碼,代碼簡單易懂，非常不錯對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
如今，電腦顯示器的屏幕分辨率向越來越大發(fā)展，而手機等移動設備終端的分辨率卻不可能大到哪里去。越來越多的網(wǎng)站，開始讓自己的頁面自適合各種分辨率，在小分辨率下顯示基本的內(nèi)容，在大分辨率下顯示全部功能，甚至是分多等級的多版本。
一、CSS2 中的@media
css2里面雖然支持@media屬性，但是能實現(xiàn)的功能比較少，一般只用做打印的時候做特殊定義的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里面已經(jīng)演變成一種 media queries（媒體查詢/匹配）了,在CSS3里面，可以用查詢語句來匹配各種類型的屏幕。
語法：
@media mediatype and|not|only (media feature) {
CSS-sRules;
}
- mediatype 媒體類型：all,print(打印機)、screen(電腦屏幕、手機等)、speech(屏幕閱讀器等設備)
- media_query and | not | only 媒體查詢條件運算
- media_feature 媒體特征，如最大寬度和最小寬度。
判斷媒介(對象)類型來實現(xiàn)不同的展現(xiàn)。此特性讓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、媒體特性
| 值 | 描述 |
|---|---|
| aspect-ratio | 定義輸出設備中的頁面可見區(qū)域?qū)挾扰c高度的比率 |
| color | 定義輸出設備每一組彩色原件的個數(shù)。如果不是彩色設備，則值等于0 |
| color-index | 定義在輸出設備的彩色查詢表中的條目數(shù)。如果沒有使用彩色查詢表，則值等于0 |
| device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的比率。 |
| device-height | 定義輸出設備的屏幕可見高度。 |
| device-width | 定義輸出設備的屏幕可見寬度。 |
| grid | 用來查詢輸出設備是否使用柵格或點陣。 |
| height | 定義輸出設備中的頁面可見區(qū)域高度。 |
| max-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最大比率。 |
| max-color | 定義輸出設備每一組彩色原件的最大個數(shù)。 |
| max-color-index | 定義在輸出設備的彩色查詢表中的最大條目數(shù)。 |
| max-device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最大比率。 |
| max-device-height | 定義輸出設備的屏幕可見的最大高度。 |
| max-device-width | 定義輸出設備的屏幕最大可見寬度。 |
| max-height | 定義輸出設備中的頁面最大可見區(qū)域高度。 |
| max-monochrome | 定義在一個單色框架緩沖區(qū)中每像素包含的最大單色原件個數(shù)。 |
| max-resolution | 定義設備的最大分辨率。 |
| max-width | 定義輸出設備中的頁面最大可見區(qū)域?qū)挾取?/td> |
| min-aspect-ratio | 定義輸出設備中的頁面可見區(qū)域?qū)挾扰c高度的最小比率。 |
| min-color | 定義輸出設備每一組彩色原件的最小個數(shù)。 |
| min-color-index | 定義在輸出設備的彩色查詢表中的最小條目數(shù)。 |
| min-device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最小比率。 |
| min-device-width | 定義輸出設備的屏幕最小可見寬度。 |
| min-device-height | 定義輸出設備的屏幕的最小可見高度。 |
| min-height | 定義輸出設備中的頁面最小可見區(qū)域高度。 |
| min-monochrome | 定義在一個單色框架緩沖區(qū)中每像素包含的最小單色原件個數(shù) |
| min-resolution | 定義設備的最小分辨率。 |
| min-width | 定義輸出設備中的頁面最小可見區(qū)域?qū)挾取?/td> |
| monochrome | 定義在一個單色框架緩沖區(qū)中每像素包含的單色原件個數(shù)。如果不是單色設備，則值等于0 |
| orientation | 定義輸出設備中的頁面可見區(qū)域高度是否大于或等于寬度。 |
| resolution | 定義設備的分辨率。如：96dpi,300dpi,118dpcm |
| scan | 定義電視類設備的掃描工序。 |
| width | 定義輸出設備中的頁面可見區(qū)域?qū)挾取?/td> |
總結(jié)
到此這篇關于使用 CSS3 中@media 實現(xiàn)網(wǎng)頁自適應的示例代碼的文章就介紹到這了,更多相關css3 media網(wǎng)頁自適應內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
- 這篇文章主要給大家介紹了關于CSS3 @media的基本用法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用CSS3具有一定的參考學習價值，需要的朋友們下面來一起學習學習2019-09-10
- 這篇文章主要介紹了詳解使用CSS3的@media來編寫響應式的頁面,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-01
CSS3 media queries + jQuery實現(xiàn)響應式導航
這篇文章主要介紹了CSS3 media queries + jQuery實現(xiàn)響應式導航的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-30- 下面小編就為大家?guī)硪黄猚ss3 media 響應式布局的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-03
- 下面小編就為大家?guī)硪黄猚ss3media響應式布局實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-08
- CSS3中的Media Queries經(jīng)常被用來制作前端的響應式設計頁面,這里整理了一份CSS3中的Media Queries學習筆記,包括IE8中的兼容問題解決,需要的朋友可以參考下2016-05-23
- 這篇文章主要介紹了CSS3 Media Queries中媒體屬性的使用,文章中還以一個響應式設計的例子作為補充講解,需要的朋友可以參考下2016-02-29