移動端rem適配屏幕

時間 2019-11-20

標籤移動 rem 適配屏幕欄目無線简体版

原文原文鏈接

　　九月已成歷史，十月如期而至...多是九月工做比較悠閒，週記就沒怎麼寫，十月決不能這麼墮落，立貼爲證，至少保證5篇博客！！！若是沒學到什麼新知識，就對以往的那些工做中經常使用到的知識點作個總結...話很少說，今天就來談談移動端的rem適配...本文將從rem是什麼、爲何要用rem適配、怎麼用rem來說解，保證淺顯易懂...css

一、什麼是rem

　　rem（font size of the root element）是指相對於根元素（<html>）的字體大小的單位。簡單的說它就是一個相對單位。看到rem你們必定會想起em單位，em（font size of the element）是指相對於自身的字體大小的單位。它們之間其實很類似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算。html

二、爲何用rem適配

　　因爲移動端的屏幕衆多，就拿iphone來講，iphone五、iphone六、iphone6+分別是320px、375px、414px...Android機的分辨率更是百花齊放...面對這麼多的屏幕，px顯然不能輕易去適配了，好比設置div的android

padding-left爲10px時，iphone5中比例和設計稿一致，但iphone6+則顯得有點「瘦」了，所以咱們要想着去適配不一樣屏幕的手機，讓設計稿在分辨率相差很大的手機上顯示的效果也要同樣。segmentfault

　　早期的適配用百分比+媒介查詢寫不少類型的css代碼，這時候的代碼量很大，適配效果也不是很好，畢竟機型太多...這時候rem的優點就充分展現出來了...不一樣分辨率的屏幕，經過動態設置rem的值（即根元素的字體大小），就能實現等比例縮放的效果。app

三、怎麼用rem

　　計算rem的方式大體分爲兩種：手淘的flexible和網易的rem.js （都是早期用法，如今已改版）；還有一種不用js計算，使用vw單位，一行css代碼搞定；dom

3.一、網易：

第一：設置視口iphone

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

第二：在dom ready之後，經過如下代碼設置html的font-size:字體

var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + ‘px‘;  // 6.4是根據設計稿/100 算出來的 具體值由設計稿定

目前小米的官網就是這種：flex

!function(n){
    var  e=n.document,
         t=e.documentElement,
         i=720,
         d=i/100,
         o="orientationchange"in n?"orientationchange":"resize",
         a=function(){
             var n=t.clientWidth||320;n>720&&(n=720);  // 720的設計稿
             t.style.fontSize=n/d+"px"
         };
         e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

3.二、手淘：

第1、判斷head中是否設置了viewport，若是有設置，按照已有viewport 設置縮放比spa

if (metaEl) {
        console.warn('將根據已有的meta標籤來設置縮放比例');
        var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
        if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
        }
    }

第2、若是沒有設置meta viewport，判斷是否設置dpr，若是有，經過dpr計算縮放scale

var content = flexibleEl.getAttribute('content');
        if (content) {
            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);//maximum 設置最大值，與initial的值比較，取最小值；
            if (initialDpr) {
                dpr = parseFloat(initialDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
            if (maximumDpr) {
                dpr = parseFloat(maximumDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
        }

第3、若是 dpr &scale都沒有設置，那麼就經過設備的dpr設置起縮放 scale

if (!dpr && !scale) {//meta[name="viewport"]&&meta[name="flexible"]都不存在。
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
        // iOS下，對於2和3的屏，用2倍的方案，其他的用1倍方案
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其餘設備下，仍舊使用1倍的方案
        dpr = 1;
    }
    scale = 1 / dpr;
}

第4、獲得scale以後，若是meta 的viewport不存在，那麼就建立一meta[name=「viewport」],將scale配置進去

    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');  // width=device-width,可省略 if (docEl.firstElementChild) {

        docEl.firstElementChild.appendChild(metaEl);
         
    }

第5、動態改寫html的font-size

    var width = docEl.getBoundingClientRect().width;//獲取html的寬度
    if (width / dpr > 540) {//判斷屏幕邏輯像素大於540時，取540
        width = 540 * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;

有關網易與手淘的適配參考：

http://www.javashuo.com/article/p-hyekbelc-cz.html

http://caibaojian.com/mobile-responsive-example.html

3.三、vw單位方案：

//750px設計稿
html{
    font-size: 13.3333vw;//(100px/750px)*100vw
}

vw方案參考：

https://blog.csdn.net/sky2714/article/details/80849863

https://blog.csdn.net/u013778905/article/details/78729468

最後，有關使用rem遇到的問題請參考：

https://blog.csdn.net/u013778905/article/details/78534287

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。