欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用 CSS3 中@media 實(shí)現(xiàn)網(wǎng)頁(yè)自適應(yīng)的示例代碼

  發(fā)布時(shí)間：2020-03-24 15:09:03   作者：ADMIN   我要評(píng)論
這篇文章主要介紹了使用 CSS3 中@media 實(shí)現(xiàn)網(wǎng)頁(yè)自適應(yīng)的示例代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

如今，電腦顯示器的屏幕分辨率向越來(lái)越大發(fā)展，而手機(jī)等移動(dòng)設(shè)備終端的分辨率卻不可能大到哪里去。越來(lái)越多的網(wǎng)站，開(kāi)始讓自己的頁(yè)面自適合各種分辨率，在小分辨率下顯示基本的內(nèi)容，在大分辨率下顯示全部功能，甚至是分多等級(jí)的多版本。

一、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（媒體查詢(xún)/匹配）了,在CSS3里面，可以用查詢(xún)語(yǔ)句來(lái)匹配各種類(lèi)型的屏幕。

語(yǔ)法：

@media mediatype and|not|only (media feature) {
CSS-sRules;
}
  1. mediatype 媒體類(lèi)型：all,print(打印機(jī))、screen(電腦屏幕、手機(jī)等)、speech(屏幕閱讀器等設(shè)備)
  2. media_query and | not | only 媒體查詢(xún)條件運(yùn)算
  3. media_feature 媒體特征，如最大寬度和最小寬度。

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

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、媒體特性

值 描述
aspect-ratio 定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域?qū)挾扰c高度的比率
color 定義輸出設(shè)備每一組彩色原件的個(gè)數(shù)。如果不是彩色設(shè)備，則值等于0
color-index 定義在輸出設(shè)備的彩色查詢(xún)表中的條目數(shù)。如果沒(méi)有使用彩色查詢(xún)表，則值等于0
device-aspect-ratio 定義輸出設(shè)備的屏幕可見(jiàn)寬度與高度的比率。
device-height 定義輸出設(shè)備的屏幕可見(jiàn)高度。
device-width 定義輸出設(shè)備的屏幕可見(jiàn)寬度。
grid 用來(lái)查詢(xún)輸出設(shè)備是否使用柵格或點(diǎn)陣。
height 定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域高度。
max-aspect-ratio 定義輸出設(shè)備的屏幕可見(jiàn)寬度與高度的最大比率。
max-color 定義輸出設(shè)備每一組彩色原件的最大個(gè)數(shù)。
max-color-index 定義在輸出設(shè)備的彩色查詢(xún)表中的最大條目數(shù)。
max-device-aspect-ratio 定義輸出設(shè)備的屏幕可見(jiàn)寬度與高度的最大比率。
max-device-height 定義輸出設(shè)備的屏幕可見(jiàn)的最大高度。
max-device-width 定義輸出設(shè)備的屏幕最大可見(jiàn)寬度。
max-height 定義輸出設(shè)備中的頁(yè)面最大可見(jiàn)區(qū)域高度。
max-monochrome 定義在一個(gè)單色框架緩沖區(qū)中每像素包含的最大單色原件個(gè)數(shù)。
max-resolution 定義設(shè)備的最大分辨率。
max-width 定義輸出設(shè)備中的頁(yè)面最大可見(jiàn)區(qū)域?qū)挾取?/td>
min-aspect-ratio 定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域?qū)挾扰c高度的最小比率。
min-color 定義輸出設(shè)備每一組彩色原件的最小個(gè)數(shù)。
min-color-index 定義在輸出設(shè)備的彩色查詢(xún)表中的最小條目數(shù)。
min-device-aspect-ratio 定義輸出設(shè)備的屏幕可見(jiàn)寬度與高度的最小比率。
min-device-width 定義輸出設(shè)備的屏幕最小可見(jiàn)寬度。
min-device-height 定義輸出設(shè)備的屏幕的最小可見(jiàn)高度。
min-height 定義輸出設(shè)備中的頁(yè)面最小可見(jiàn)區(qū)域高度。
min-monochrome 定義在一個(gè)單色框架緩沖區(qū)中每像素包含的最小單色原件個(gè)數(shù)
min-resolution 定義設(shè)備的最小分辨率。
min-width 定義輸出設(shè)備中的頁(yè)面最小可見(jiàn)區(qū)域?qū)挾取?/td>
monochrome 定義在一個(gè)單色框架緩沖區(qū)中每像素包含的單色原件個(gè)數(shù)。如果不是單色設(shè)備，則值等于0
orientation 定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域高度是否大于或等于寬度。
resolution 定義設(shè)備的分辨率。如：96dpi,300dpi,118dpcm
scan 定義電視類(lèi)設(shè)備的掃描工序。
width 定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域?qū)挾取?/td>

總結(jié)

到此這篇關(guān)于使用 CSS3 中@media 實(shí)現(xiàn)網(wǎng)頁(yè)自適應(yīng)的示例代碼的文章就介紹到這了,更多相關(guān)css3 media網(wǎng)頁(yè)自適應(yīng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • CSS3 @media的基本用法總結(jié)

    這篇文章主要給大家介紹了關(guān)于CSS3 @media的基本用法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用CSS3具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)
    2019-09-10

  • 詳解使用CSS3的@media來(lái)編寫(xiě)響應(yīng)式的頁(yè)面

    這篇文章主要介紹了詳解使用CSS3的@media來(lái)編寫(xiě)響應(yīng)式的頁(yè)面,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-11-01

  • CSS3 media queries + jQuery實(shí)現(xiàn)響應(yīng)式導(dǎo)航

    這篇文章主要介紹了CSS3 media queries + jQuery實(shí)現(xiàn)響應(yīng)式導(dǎo)航的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
    2016-09-30

  • css3 media 響應(yīng)式布局的簡(jiǎn)單實(shí)例

    下面小編就為大家?guī)?lái)一篇css3 media 響應(yīng)式布局的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-08-03

  • css3media響應(yīng)式布局實(shí)例

    下面小編就為大家?guī)?lái)一篇css3media響應(yīng)式布局實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-07-08

  • CSS3中的Media Queries學(xué)習(xí)筆記

    CSS3中的Media Queries經(jīng)常被用來(lái)制作前端的響應(yīng)式設(shè)計(jì)頁(yè)面,這里整理了一份CSS3中的Media Queries學(xué)習(xí)筆記,包括IE8中的兼容問(wèn)題解決,需要的朋友可以參考下
    2016-05-23

  • 詳解CSS3 Media Queries中媒體屬性的使用

    這篇文章主要介紹了CSS3 Media Queries中媒體屬性的使用,文章中還以一個(gè)響應(yīng)式設(shè)計(jì)的例子作為補(bǔ)充講解,需要的朋友可以參考下
    2016-02-29

最新評(píng)論