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

前往懸崖下尋寶的神三算จุ๊บ發表於2018-05-18
前端REM

免責說明

本文內容淺薄，不喜勿噴

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

什麼是rem?

rem是根元素字型的單位，比如 html{font-size:16px;} ，1rem相當於16px。

不僅僅可以給字型用，其他px單位的都可以用，比如設padding:2rem ，相當於32px。

響應式佈局的準則

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

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

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

2 . 內容區塊可自由排布：當頁面尺寸變動較大時，能夠減少/增加排布的列數

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

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

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

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

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

5 .內容能夠自動隱藏/部分顯示：如在電腦上顯示的的大段描述文字，在手機上就只能少量顯示或全部隱藏

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

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

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

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只是等比縮放，只解決了響應式佈局的準則 的部分問題 ，還需要配合媒體查詢

相關文章