rem的佈局新見解

其實，在寫這篇部落格之前，我建議大家可以參看這篇文章從網易與淘寶的font-size思考前端設計稿與工作流，我在仔細消化這篇文章後做了一個自己的看法和理解，歡迎交流。

畫素單位的選擇

em的沒落

em的計算與繼承：em是基於父元素而來計算的，比如div的parent節點font-size為1.2em，如果我們此時再對div做一個font-size的設定為1.2em，如果1em=12px，那麼此時的div font-size為14.4px。

rem的受寵

恰恰相反，rem確實移動開發的最佳選擇，因為rem的計算是基於html節點來換算px的。預設1rem = 16px。

網易的移動端設計方法

如果仔細檢視網易移動端新聞網頁的檢視，我們會清晰的發現html節點上有個很明顯的標誌就是style對font-size的設定。那麼我們必須明白的就是這個值是怎麼計算出來的。首先，我們必須根據設計稿來。當設計師標註好相關的字型、長度和寬度後，我們先要看psd設計圖的大小。比如：我們的設計稿寬為1080px的話，那我們選個100px(好計算)，那麼我們的視口寬度就是1080/100=10.8rem，也就是說100px就是1.08rem。當我們設計對應的寬高的時候就可以計算出相應的rem值。

js動態設定

    (function(win, doc, dw) {
        var
 
 docEl = doc.documentElement,
                dw = dw || 640,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function() {
                    var docElWidth = docEl.clientWidth;
                    (docElWidth > 640) && (docElWidth = 640
 
);
                    if (!docElWidth) return;
                    docEl.style.fontSize = docElWidth / (640 / 100) + 'px';  //基於640px設計稿
                };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
    })(window, document, 640);

這樣就可以很好的按設計稿的尺寸來設定相應的寬高了，但是不要對字型用rem單位，還是要用相應的媒介查詢來設定字型。千萬要在html做視口設定:

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