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

發(fā)布時間：2020-08-14 16:51:20 作者：我的名字豌豆

這篇文章主要介紹了詳解如何使用rem或viewport進(jìn)行移動端適配，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

在開發(fā)移動端界面時，移動端適配一直是一個比較頭疼的事情，常見的移動端適配有viewport適配，rem適配，百分比適配等等，在這里我們只介紹viewport適配和rem適配?？赐赀@篇文章相信你應(yīng)該會實(shí)戰(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的值)：

<script type="text/javascript">        
        //rem適配
        //rem適配原理：改變了一個元素在不同設(shè)備上占據(jù)的css像素的個數(shù)
        /*rem適配的優(yōu)缺點(diǎn)
            優(yōu)點(diǎn):沒有破壞完美視口
            缺點(diǎn):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代碼:

    <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ī)的型號(視口的大小)對于頁面的元素有什么變化。

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

rem適配原理

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

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

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

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

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

此時我們的less代碼為:

/* 此時我們的750為設(shè)計圖大小,具體值應(yīng)該跟隨設(shè)計圖大小來進(jìn)行設(shè)置 */
/* 對于750/16rem的邏輯為:因?yàn)?6rem為占據(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適配，實(shí)際是更改視口的大小，也就是說可以將其當(dāng)作近大遠(yuǎn)小的原理，當(dāng)減小視口寬度之后當(dāng)前元素的可視大小也會減小，當(dāng)增加視口寬度之后當(dāng)前的元素可視大小會增大。從而進(jìn)行移動端的適配。話不多說繼續(xù)上代碼：

js代碼:

(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代碼:

    <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>

可以看出此時元素的大小并沒有發(fā)生改變(因?yàn)槲覀兏淖兊氖且暱诘拇笮〔⒉皇窃氐拇笮?但其仍會占據(jù)視口的一半(根據(jù)縮放比來去改變元素在當(dāng)前界面所占據(jù)的大小)。這就是viewport進(jìn)行移動端適配的使用。

viewport適配的原理

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

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

# 三：結(jié)尾

以上為rem適配與viewport適配使用進(jìn)行的總結(jié)，但還是推薦大家使用less+rem進(jìn)行移動端的適配，更多相關(guān)rem或viewport移動端適配內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！