前言

rem（font size of the root element）是指相對於根元素的字型大小的單位。一旦根節點html 定義的 font-size 變化，那麼整個網頁中運用到 rem的也會隨之變化。由於現在不同螢幕解析度的裝置越來越多，尤其是手機端移動裝置，人的審美水平的挺高，僅僅依靠百分比以不足以滿足人們的需求。

區別

rem、em和px的區別

px 畫素，通常用作網頁設計，有較高的精度，是一個絕對單位

em 相對長度單位，受父級或祖級元素的文字大小所影響，1em就是1倍的文字大小

rem 相對長度單位，但相對的只是HTML根元素

程式碼

//第一個引數設計圖尺寸，第二個引數要設定的根元素font-size大小
getRem(750, 100);
window.onresize = function() {
    getRem(750, 100)
};

function getRem(pwidth, prem) {
    var html = document.getElementsByTagName("html")[0];
     //獲取視窗寬度
     //下面的程式碼是為了考慮相容性
     //在IE7、IE8、Firefox中，document.body.clientWidth以及 document.body.clientHeightzhi值為0，此時，可以使用 document.documentElement.clientHeight等代替。
    var oWidth = document.documentElement.clientWidth || document.body.clientWidth;
    html.style.fontSize = oWidth / pwidth * prem + "px";
}
 

 使用

直接在css前處理器使用更為方便，比如less

//若設計圖是750，開發是350可直接/50
div {
    height: 50/50rem;
    width:50/50rem;
    border:1/50rem solid #ccc;
    font-size: 14/50rem;
}