REM 佈局

1.rem是什麼?

rem(font size of the root element)是指相對於根元素的字體大小的單位

2.爲何web app要使用rem？

實現強大的屏幕適配佈局(淘寶,騰訊,網易等網站都是rem佈局適配)rem能等比例適配全部屏幕,根據變化html的字體大小來控制rem的大小,如不一樣html字體大小的計算下,rem值不一樣

第一個例子：
html{font-size:10px;}
a{width:1rem;height:1rem}
10px = 1rem * 10px

第二個例子：
html{font-size:20px;}
a{width:1rem;height:1rem}
20px = 1rem * 20px

推算出：
10px  = 1rem 在根元素（font-size = 10px的時候）；
20px  = 1rem 在根元素（font-size = 20px的時候）；
40px  = 1rem 在根元素（font-size = 40px的時候）；

 

html設置成100px是爲了方便咱們計算，如 6rem等於600px。

 

一.常規狀況下js根據屏幕寬度動態計算

(function(doc,win){
    var docEl = doc.documentElement;
    var resizeEvt = "onorientationchange" in win ? "orientationchange" : "resize";
    var Timer = null;
    function recalc(){
        var clientWidth = docEl.clientWidth || win.innerWidth;
        //設計稿是640px
        var initSize = (clientWidth/640) * 100;
        var fontSize = clientWidth > 768 ? 120 : (initSize < 50 ? 50 : initSize);
        docEl.style.fontSize = fontSize + "px";
    }
    doc.addEventListener("DOMContendLoaded",recalc,false);

    //轉屏
    win.addEventListener(resizeEvt,function(){
        clearTimeout(Timer);
        Timer = setTimeout(recalc,300)
    },false);

    //pageshow,緩存相關
    win.addEventListener("pageshow",function(e){
        if(e.persisted){
            clearTimeout(Timer);
            Timer = setTimeout(recalc,300)
        }
    },false);

    // 初始化
    recalc();

})(document,window);

 

設計稿通常都是640寬的，psd轉換爲 html+css 的時候咱們是按照320來作的（用css像素來度量的話，iPhone四、iPhone5都是這個尺寸）。在沒有使用rem而是直接把字體、高度之類的寫死的時候，在ps中量出來寬高、字體什麼的每次都得手動除以2再寫到css中。。如今我設定的基準是320下面html{font-size:50px}，主要是方便每次在ps中測量完了以後不用除以2.

二.rem佈局字體不用rem值是由於在Retina屏幕下會變的很大,而這時候咱們更但願在大屏幕上顯示更多的內容,在淘寶中是用了dpr是判斷

if (!dpr && !scale) {
    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;
}
document.documentElement.setAttribute('data-dpr', dpr);

div {
    width: 1rem;
    height: 0.4rem;
    font-size: 12px; // 默認寫上dpr爲1的fontSize
}

[data-dpr="2"] div {
    font-size: 24px;
}

[data-dpr="3"] div {
    font-size: 36px;
}