1、為什麼要用rem

部落格很久沒寫了，原因很簡單。

最近接手了一個專案，要同時做PC和移動端的頁面，之前沒接觸過，但畢竟給錢的是大爺，所以還是硬著頭皮上了。

移動端最麻煩的是什麼？

不同解析度適配！

具體來說，有的螢幕320px寬，有的螢幕640px寬，有的更寬，如果你寫固定px，那麼要麼小的放不下，要麼大的有大片空白。

怎麼辦？

如果元素固定佔用螢幕空間（一般是指寬度而非高度，下同）的百分之xx就ok了。

比如320px的10%是32px，640px的10%是64px，

如果10個10%寬度的元素放在一起，那肯定就是100%，即擠滿螢幕（寬度），不會超出，也不會留白。

簡單理解：

rem

就是指螢幕寬度的百分之x；

或者說，n個rem = 使用者可視區域100%寬度

注意，之所以不說高度，是因為寬度（x軸）滿了後，y軸（高度）方向的內容可以通過滾動螢幕來檢視

上例項：

1、設計師給一個640px寬度的設計圖，

2、你假定64rem=100%寬度（這裡是640px），那麼1rem=10px；

3、你照著寫出了靜態頁面，然後按照1rem=10px的比例，將設計圖上的元素的大小，全部用rem寫下；

4、完美，你寫的靜態頁面在640px寬度的頁面上正常展示了；

5、A使用者使用的是320px寬度的手機，因為你假設64rem=100%寬度，因此此時1rem=5px（320/64=5），於是也完美展示了；

2、rem怎麼用？

1. rem是css單位；
2. 1rem的大小是通過html下的font-size這個css屬性告訴瀏覽器的；
3. 使用替換px所在的位置即可

假定你預設在設計稿的時候 1rem = 10px;

然後一個元素（class=”ele”）的寬度是20px，高度30px（設計稿），

那麼你的css這麼寫就可以了；

html {
    font-size: 10px;
}

.ele {
    width: 2rem;
    height 3rem;
}

3、在任何解析度下都適用

發現問題在哪裡了麼？如何確認1rem等於多少px？

原因是rem是css中使用的單位，css是不會幫你計算1rem是多少px的，只能通過你自己來計算。

計算方式很簡單，簡單來說：

1、你有一個設計稿A（假定640px），有一個預設的rem和px的比例B（假如是1rem = 10px）

2、獲取使用者瀏覽器的可視區域的寬度C（假如是320px），那麼他此時1rem的尺寸D 可以根據 B/A = D/C 這個公式得知

3、原因是你假定螢幕可以容納多少個rem，這是一個固定比例（如這裡就是64rem）

1 rem = B / A * C;
//代入可得
1 rem = 10px / 640px * 320px = 5px;

4、其他

1、使用者載入完後，你就得設定好1rem的尺寸吧（記得是設定在html元素下的font-size）；

2、假如使用者螢幕的尺寸會變，你肯定得考慮吧（重新整理1）；

3、你懶得去找相應的程式碼，我總得給你吧（如下）；

var fun = function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;

            //這裡是假設在640px寬度設計稿的情況下，1rem = 20px；
            //可以根據實際需要修改
            docEl.style.fontSize = 20 * (clientWidth / 640) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
}
fun(document, window);

直接執行即可