移動端rem

移動端內包括微信端： 設置meta標籤達到視口的響應式。
經過rem做單位。來匹配不一樣型號的手機的適配。
微信端: 通常設視口爲640px。 給html元素設置 font-size:40px； html 內部最大寬度元素最大爲width:16rem或 max-width:16rem。這樣其html內部元素最寬就是
640px;不會超過視口的寬度。就不會出現滾動條。
經過js 腳本在html head標籤內部最少影響css 重排，重繪的位置。初始就加載這段腳本
寫
來達到如果視口的寬度小於640的話，就改變html元素的font-size的字體大小的寬度。從而改變html內部元素的寬度。通常視口小於640的，視口減少。html元素
內部元素的寬度也會減少。達到來適配視口的目的。

下面是更好的封裝


(function(win) {
    var remCalc = {};
    var docEl = win.document.documentElement,
            tid;

    function refreshRem() {
        // 獲取當前窗口的寬度
        var width = docEl.getBoundingClientRect().width;
        // 大於640px 按640算
        if (width > 640) { width = 640 }
        // 把窗口的寬度固定分爲16份 也就是16rem
        // 按視覺稿640算  640/16=40px  那麼1rem = 40px
        // 640視覺中 80px*80px的按鈕 轉換爲rem  80/40 = 2rem
        // 按鈕的寬高固定爲 2rem * 2rem
        // 當窗口寬度縮放爲 320px的時候
        // 那麼 1rem = 20px
        // 原來 80px*80px的按鈕如今變爲 2rem * 20px = 40px
        // 按鈕變爲 40px * 40px
        // 其餘寬度也相似
        //
        // cms作法也相似
        // 只是咱們把窗口寬度固定分爲 6.4份，即6.4rem
        // 因此 1rem = 100px
        // 640視覺中 80px*80px的按鈕 轉換爲rem  80/100 = 0.8rem
        // ....其餘也差很少
        //
        var rem = width / 16;  
        docEl.style.fontSize = rem + "px";

        remCalc.rem = rem;
        //偏差、兼容性處理
        var actualSize = parseFloat(window.getComputedStyle(document.documentElement)["font-size"]);
        if (actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) {
            var remScaled = rem * rem / actualSize;
            docEl.style.fontSize = remScaled + "px"
        }
    }

    //函數節流
    function dbcRefresh() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 100)
    }

    //窗口更新動態改變font-size
    win.addEventListener("resize", function() { dbcRefresh() }, false);

    //頁面顯示的時候再計算一次   
    refreshRem();
    remCalc.refreshRem = refreshRem;
    win.remCalc = remCalc
})(window);

更多比較好的適配能夠參考 https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
https://www.w3cplus.com/css/vw-for-layout.html