rem來做適配

以前我們往往這樣做頁面：viewport width 設定為 device-width，然後選我們需要相容裝置的最小寬度（一般是320px）。根據這最小寬度來做頁面。單位使用px和百分比。在寬度不同的裝置上，頁面的字型大小，內容尺寸都是一樣的，不同的是，大屏的內容間的空隙比小屏的大。所以這樣做的缺點就是，頁面在某些尺寸的裝置上顯示的效果不好。

如果用rem來頁面，我們會根據不同的裝置寬度在根元素上設定不同的字型大小。寬度越寬，字型越大。然後對原本使用px的地方使用rem來替換。這樣，字型大小，內容尺寸，對隨著螢幕寬度的變大而變大。

具體做法

1 根據不同的裝置寬度在根元素上設定不同的字型大小。
為了能將設計稿中的 px 方便的轉換為頁面中 rem，我設定 1rem 為 寬度為 640px 的設計稿中的 100px。程式碼如下

(function(win) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (width > 540) { // 最大寬度
            width = 540;
        }
        var rem = width / 6.4; 
        docEl.style.fontSize = rem + 'px';
    }

    win.addEventListener('resize', function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    refreshRem();

})(window)
 

備註：寫的時候最好利用script標籤把js寫到head中