今天分享一段程式碼，用於解決手機端響應式佈局。
在開發手機端頁面時經常用到。
只需在頁面引入這段原生js程式碼就可以了

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if
 
 (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

首先需要解釋一下rem和px換算方法：

rem是相對單位，如果頁面根元素html中沒有指定參照大小，則預設1rem=16px；
如果假設html中設定了font-size:20px，則1rem=20px；
em則是參照父元素字型大小。

程式碼的主要作用是：

當頁面寬度超過640px，則設定html中font-size為100px，頁面中1rem=100px
這是定死了，字型不會根據頁面大小而縮放了。

當頁面寬度小於640，html中的font-size就動態變化，隨著頁面變小而變小，按照100 * (當前頁面寬度 / 640)的規律變化。頁面整體如果以rem為單位，隨著瀏覽器頁面大小變化會進行縮放。

640px只是一個常用的資料，一般設計圖是640寬。具體可以根據設計圖大小進行設定。
100px則是因為這樣設定之後，1rem=100px，方便換算。不過我一般是用20px來換算的