• <strike id="2k0e4"></strike>
    <ul id="2k0e4"><tbody id="2k0e4"></tbody></ul>
  • <th id="2k0e4"><menu id="2k0e4"></menu></th>
  • 移動端適配:如何使用rem或viewport進(jìn)行移動端適配

    H5開發(fā)移動端界面時,移動端適配一直是一個比較頭疼的事情,常見的移動端適配有viewport適配,rem適配,百分比適配等等,在這里我們只介紹viewport適配和rem適配??赐赀@篇文章相信你應(yīng)該會實戰(zhàn)操作移動端對于不同手機(jī)大小的適配問題了。

    移動端適配

    一:rem適配

    rem是指相對于根元素的字體大小(font-size)的單位,根標(biāo)簽的font-size=1rem。其可以稱作為相對單位,也就是說我們可以通過視口的大小動態(tài)更新根元素字體大小(font-size)的值,從而動態(tài)更新rem所相對的值,使用使得移動端網(wǎng)頁能夠適配各種型號的手機(jī)。話不多說先上代碼。

    js代碼(用于動態(tài)修改其根標(biāo)簽font-size的值):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <script type="text/javascript">???????
    ????????//rem適配
    ????????//rem適配原理:改變了一個元素在不同設(shè)備上占據(jù)的css像素的個數(shù)
    ????????/*rem適配的優(yōu)缺點
    ????????????優(yōu)點:沒有破壞完美視口
    ????????????缺點:px值到rem的轉(zhuǎn)換太復(fù)雜*/
    ????????????
    ????????(function(){
    ????????????var styleNode = document.createElement("style");
    ????????????/* 當(dāng)不除以16時此時1em便占據(jù)視口寬度,
    ????????????那么我們給其頁面中的元素設(shè)置寬高基本都會小于1rem,瀏覽器的計算并不會特別精準(zhǔn)容易出現(xiàn)偏差 */
    ????????????// var w = document.documentElement.clientWidth;
    ????????????/* 所以此時我們除以16,使得16rem便占據(jù)了滿屏,對于頁面中大多數(shù)元素的rem都會超過1rem */
    ????????????var w = document.documentElement.clientWidth/16;//獲取視口大小
    ????????????/* 設(shè)置此時根元素的fontsize,向html的style樣式中添加font-size屬性*/
    ????????????styleNode.innerHTML = "html{font-size:"+w+"px!important}";
    ????????????//向head標(biāo)簽中添加style標(biāo)簽,其中包含html{font-size:w;}
    ????????????document.head.appendChild(styleNode);
    ????????})()
    ????</script>

    html與css代碼:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <head>
    ????<meta charset="UTF-8">
    ????<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    ????<title></title>
    ????<style type="text/css">
    ????????*{
    ????????????margin: 0;
    ????????????padding: 0;
    ????????}
    ????????#test{
    ????????????width: 2rem;
    ????????????height: 2rem;
    ????????????background: pink;
    ????????????text-align: center;
    ????????????line-height: 2rem;
    ????????}
    ????</style>
    </head>
    <body>
    ????<div id="test">test</div>
    </body>

    我們來看一下通過改變手機(jī)的型號(視口的大小)對于頁面的元素有什么變化。

    移動端適配:如何使用rem或viewport進(jìn)行移動端適配

    移動端適配:如何使用rem或viewport進(jìn)行移動端適配

    從上述兩張圖我們可以看出,當(dāng)我們改變手機(jī)的型號后(改變完成后記得要刷新哦),視口的大小也發(fā)生了改變,對于test元素的寬高也發(fā)生了改變,此時我們就能夠進(jìn)行進(jìn)行移動端適配了。

    rem適配原理

    改變了一個元素在不同設(shè)備上占據(jù)的css像素的個數(shù)

    rem適配的優(yōu)缺點

    • 優(yōu)點:沒有破壞完美視口
    • 缺點:px值轉(zhuǎn)換rem太過于復(fù)雜(下面我們使用less來解決這個問題)

    less+rem解決轉(zhuǎn)換復(fù)雜問題

    使用less中進(jìn)行運算,減少了我們手動進(jìn)行計算所需要的rem值,也可以使用stylus,scss等css預(yù)處理器,來進(jìn)行對于rem的運算,該例子需要結(jié)合上述js代碼來進(jìn)行搭配。

    此時我們的less代碼為:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /* 此時我們的750為設(shè)計圖大小,具體值應(yīng)該跟隨設(shè)計圖大小來進(jìn)行設(shè)置 */
    /* 對于750/16rem的邏輯為:因為16rem為占據(jù)頁面的總寬,所以750(設(shè)計圖的寬度)/16rem得出1rem與設(shè)計圖的等比 */
    /* 這個適合我們就可以根據(jù)該元素在設(shè)計圖的寬度來設(shè)計大小啦,例如test的寬高為200px,那么我們就可以這樣來寫: */
    ????@rem:750/16rem;
    ????#test{
    ??????????????width: 200/@rem;
    ??????????????height: 200/@rem;
    ??????????????background: pink;
    ??????????????text-align: center;
    ??????????????line-height: 200/@rem;
    ??????????}

    注意!需要結(jié)合上述的js代碼來一起使用哦!

    二:viewport適配

    對于viewport適配,實際是更改視口的大小,也就是說可以將其當(dāng)作近大遠(yuǎn)小的原理,當(dāng)減小視口寬度之后當(dāng)前元素的可視大小也會減小,當(dāng)增加視口寬度之后當(dāng)前的元素可視大小會增大。從而進(jìn)行移動端的適配。話不多說繼續(xù)上代碼:

    js代碼:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    (function(){
    ?????????????/* targetW的值為設(shè)計圖的寬度大小,此時設(shè)置的寬度大小為640 */
    ????????????var targetW = 640;
    ????????????/* 獲取視口縮放的比例 */
    ????????????var scale = document.documentElement.clientWidth/targetW;
    ????????????/* 獲取到meta標(biāo)簽 */
    ????????????var meta =??? document.querySelector("meta[name='viewport']");
    ????????????/* 向其添加縮放的比例 */
    ????????????meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";
    ????})()

    html與css代碼:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width"/>
    ????<title></title>
    ????<style type="text/css">
    ????????*{
    ????????????margin: 0;
    ????????????padding: 0;
    ????????}
    ????????/* 將其寬度設(shè)置為設(shè)計圖大小的一半(設(shè)計圖大小為640px),將其高度設(shè)置為100px */
    ????????#test{
    ????????????width: 320px;
    ????????????height: 100px;
    ????????????background: pink;
    ????????????text-align: center;
    ????????????font-size: 32px;
    ????????????line-height: 100px;
    ????????}
    ????</style>
    </head>
    <body>
    ????<div id="test">test</div>
    </body>

    移動端適配:如何使用rem或viewport進(jìn)行移動端適配

    移動端適配:如何使用rem或viewport進(jìn)行移動端適配

    可以看出此時元素的大小并沒有發(fā)生改變(因為我們改變的是視口的大小并不是元素的大小)但其仍會占據(jù)視口的一半(根據(jù)縮放比來去改變元素在當(dāng)前界面所占據(jù)的大小)。這就是viewport進(jìn)行移動端適配的使用。

    viewport適配的原理

    viewport適配方案中,每一個元素在不同設(shè)備上占據(jù)的css像素的個數(shù)是一樣的。但是css像素和物理像素的比例是不一樣的,等比的*/

    • viewport適配的優(yōu)缺點
    • 在我們設(shè)計圖上所量取的大小即為我們可以設(shè)置的像素大小,即所量即所設(shè)
    • 缺點破壞完美視口



    請輸入姓名或昵稱
    如果您有任何疑問、需要更多信息或希望與我們建立合作請留言
    =

    本文來自網(wǎng)絡(luò),經(jīng)授權(quán)后發(fā)布,本文觀點不代表Infocode藍(lán)暢信息技術(shù)立場,轉(zhuǎn)載請聯(lián)系原作者。

    (0)
    Infocode藍(lán)暢Infocode藍(lán)暢
    上一篇 2020年9月25日 上午10:01
    下一篇 2020年9月26日 下午2:31
    主站蜘蛛池模板: 日本无码一区二区三区白峰美| 无码任你躁久久久久久老妇App| 亚洲av无码不卡久久| 精品人妻系列无码天堂| 亚洲a∨无码精品色午夜| 18禁成年无码免费网站无遮挡| 国产成人无码专区| 亚洲日韩精品无码AV海量| 少妇性饥渴无码A区免费| 国产网红主播无码精品| 亚洲av无码久久忘忧草| 国产成人精品无码一区二区老年人| 日日摸日日踫夜夜爽无码| 国产丝袜无码一区二区三区视频 | 无码精品视频一区二区三区| 人妻精品久久无码区| 无码人妻精品一区二区三18禁| 无码人妻一区二区三区av| 亚洲AV综合色区无码二区偷拍| 亚洲中文字幕无码爆乳AV| 无码熟熟妇丰满人妻啪啪软件| 亚洲午夜无码久久久久小说| 东京热人妻无码一区二区av| 国产精品无码无片在线观看3D| 97精品人妻系列无码人妻| 熟妇人妻无码中文字幕| 无码人妻精品一区二区三18禁 | 国产在线拍偷自揄拍无码| 无码专区6080yy国产电影| 好了av第四综合无码久久 | 久久久久久国产精品无码超碰| 亚洲乱亚洲乱妇无码麻豆| 超清无码一区二区三区| 中文成人无码精品久久久不卡| 亚洲AⅤ永久无码精品AA| 成人免费无码大片a毛片软件| 本道久久综合无码中文字幕| 无码熟妇人妻AV在线影院| 无码成人AAAAA毛片| 亚洲男人第一无码aⅴ网站| 无码毛片一区二区三区视频免费播放|