中止使用像素思惟去思考

本篇文章主要是記錄開發過程當中使用rem的過程，包括字體大小和寬高如何設置。

先來一波官方解釋

rem 的官方定義『The font size of the root element.』，能夠簡稱root em，即以根節點的字體大小做爲基準值進行長度計算。通常認爲網頁中的根節點是 html 元素，因此採用的方式也是經過設置 html 元素的 font-size 來作屏幕適配。

rem和px是如何計算，相互轉換的

首先這個並無一個固定的換算，由於這個取決於本身的手寫的js轉換文件

最簡單就是百倍換算，1rem=100px，那麼上面所量取的rem就很明確了 41px=.41rem，40px=.4rem。

有人會問了，你這裏怎麼寫了.41rem .4rem，你的0被你吃了，不該該是0.41rem 0.4rem嗎？

別慌，並無被我吃了。是由於在谷歌的前端開發規範中當小於1的時候0能夠省略不寫。

你是否是記不記得 background：rgba(0，0，0，.5)，這個你再熟悉不過了吧。.5表示透明度，就寫成了沒有0的方式

這樣每次量取了直接用px/100，就是所對應的rem的大小。

貼一下咱們項目的關於rem和px的轉化文件。想要在項目中使用rem佈局，直接複製下面這段代碼就能夠了

<script type="text/javascript">
  (function (doc, win) {
    var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () {
        var clientWidth = docEl.clientWidth
        if (!clientWidth) return
        clientWidth = (clientWidth > 375) ? 375 : clientWidth
        docEl.style.fontSize = clientWidth / 3.75 + 'px'
      }
    if (!doc.addEventListener) return
    win.addEventListener(resizeEvt, recalc, false)
    recalc()
  })(document, window)
</script>
複製代碼

在實際項目使用過程當中，直接想上面的js複製到本身項目裏面就行，就自動對應了1rem=100px

如何設置字體的rem

做爲一個前端，咱們平時接觸到的UI給咱們的PSD文件，咱們應該量取字體的大小呢，用來設置rem的單位。

下面是一個psd文件的設計稿：

第一種：根據寬來衡量

font-size: .41rem;
複製代碼

第二種：根據高來衡量

font-size: .4rem;
複製代碼

固然，若是在設計稿上面量出的寬和高分別是30和29，你設置.3rem和.29rem都是差很少的；可是假如寬和高是30和20，固然這是一種比較誇張的說法，咱們只是在說理論。那麼是設置.3rem仍是.2rem呢？

若是寬和高想等的狀況下，不管是經過寬仍是高來衡量，隨便去一個值均可以實現字體的rem設置。

若是寬和高不想等呢？我是使用寬和高哪一個來做爲最終的rem字體大小呢？

建議也是身邊大多數朋友使用的寬來做爲標準設置計算rem。

由於在拿到設計稿的時候，咱們設計稿的寬度通常都是固定的，使用寬來做爲標準，字體大小就有一個固定的基準值來計算rem的大小；使用高的話，在不一樣設備上面，高度也可能有變化，因此不推薦使用高來做爲標準來計算。

margin和padding這些邊距如何計算

這個就相對來講簡單了，直接量取px相應的px，而後除以100就好了。

好比

咱們就設置相應的margin/padding=.41rem就好了。

rem和vw vh我應該使用哪個？

在大屏幕上面顯示效果下使用rem和vw vh 都是沒有關係的。**可是到了特別小的屏幕上面，vw wh 就出現了問題，所有都被擠出了。**最多見的就是給一個table，來設置一個寬，你能夠嘗試使用rem和vw vh來分別佈局一下，而後把瀏覽器窗口調的比較小就發現vw和vh很差使了。

何時使用rem？

雖然rem是針對移動端來設計出來的字體單位，可是一樣適用於pc端。

因此我建議不管是pc端仍是移動端都適用rem來操做。即便如今大家項目如今沒有移動端，只有pc端，萬一後續有了呢？固然你可使用第三方插件來批量修改，可是仍是pc端和rem來進行操做。

頁面中哪些元素須要使用rem

margin / padding /border /font-size/border-radius 都適用rem嗎？

確定不是的。確定是須要的時候使用rem，os: 你這句話說了等於沒說，辣雞！

想一下，平時若是使用rem，咱們須要margin padding font-size border-radius 確定是須要根據頁面的大小來動態設置。

可是border：.3rem solid red; 邊框你要設置rem單位的話，就會很是醜陋。好比在超大屏幕上面，你的border變成了border：10px solid red；

你能夠想象一下，這個屏幕上面忽然出現一個10px的線是怎樣的體驗。醜，醜的不行。因此border這個就建議使用px，其餘的就使用rem來佈局

補充

rem和px的轉換也可使用下面的js.

這是rem佈局的核心代碼，這段代碼的大意是： **若是頁面的寬度超過了640px，那麼頁面中html的font-size恆爲100px，不然，頁面中html的font-size的大小爲： 100 * (當前頁面寬度 / 640) **

(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=640){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };

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