前端響應式佈局基礎——rem

免責說明

本文內容淺薄，不喜勿噴

什麼是rem?

rem是根元素字體的單位，好比 html{font-size:16px;} ，1rem至關於16px。

不單單能夠給字體用，其餘px單位的均可以用，好比設padding:2rem ，至關於32px。

響應式佈局的準則

響應式佈局的要求（摘自知乎 Z Yuhan）：

1 . 內容區塊可伸縮：內容區塊的在必定程度上可以自動調整，以確保填滿整個頁面

2 . 內容區塊可自由排布：當頁面尺寸變更較大時，可以減小/增長排布的列數

3 .邊距適應：到頁面尺寸發生更大變化時，區塊的邊距也應該變化

4 .圖片適應：對於常見的寬度調整，圖片在隱去兩側部分時，依舊保持美觀可用

5 .內容可以自動隱藏/部分顯示：如在電腦上顯示的的大段描述文本，在手機上就只能少許顯示或所有隱藏

6 .導航和菜單能自動摺疊：展開仍是收起，應該根據頁面尺寸來判斷

7 .字體比例縮放時，字體也保持縮放

rem有什麼用

放棄px單位，使用rem做爲單位，這樣在不一樣尺寸的設備上，經過修改根節點的font-size大小，實現等比例縮放

假設設備寬度爲600px，頁面只有2個在一行的div，使用rem寬度以下設置

html{
    font-size:10px;
}
#div1{
    width:20rem;
    float:left;
}
#div2{
    width:40rem;
    float:left;
}
複製代碼

如今換到寬度爲400px的設備上，保持比例相同，只有改變font-size便可

//在js計算字體大小，x爲縮小比例
400/600=x/10
x=6.6
複製代碼

html{
    font-size:6.6px;/*實際上使用js動態改變，也能夠配置媒體查詢*/
}
/*如下保持不變*/
#div1{
    width:20rem;
    float:left;
}
#div2{
    width:40rem;
    float:left;
}
複製代碼

爲何不用百分比呢？豈不是很簡單

百分比是相對於父元素計算的，使用不方便，並且rem多了個字體變化。

如何使用

1 . 給根元素設置字體大小，並在body元素校訂

html{font-size:100px;}
body{font-size:14px;}
複製代碼

如上設置後，使用rem代替px，直接除100便可

.menu li{
	display: table-cell;
	padding: .1rem .3rem;/*至關於10px 30px*/
}
複製代碼

2 . 綁定監聽事件，dom加載後和尺寸變化時改變font-size

注意把代碼中的 1536 修改成實際開發時頁面的寬度

//改變font-size
(function(doc,win){
    var docEI = doc.documentElement,
    resizeEvt = 'orientationchange' in window?'orientataionchange':'resize',
    recalc = function(){
        var clientWidth = docEI.clientWidth;
        if(!clientWidth) return;
        //100是字體大小，1536是開發時瀏覽器窗口的寬度，等比計算
        docEI.style.fontSize = 100*(clientWidth/1536)+'px';
    }

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

自動轉換成rem

參見 postcss，待後續。。。

A & Q

• 爲何不設置 font-size:62.5% ？

  由於谷歌有些版本不支持10px大小的字體

• 爲何不使用 em ？

  同百分比同樣，相對於父元素計算不方便

• 爲何不使用 viewport 等比縮放？

  viewport的作法：

  <meta name=" viewport " content=" width=320, maximum-scale=1.3, user-scalable=no ">

  這種作法是將屏幕等比縮放，縮放過大時會失真

• 使用rem web就是響應式的了嗎？

  不是，rem只是等比縮放，只解決了響應式佈局的準則 的部分問題 ，還須要配合媒體查詢