摘要：有與兩種方式來調(diào)整元素大小的值。如果你的頁面還需要適配到端，那么就老老實(shí)實(shí)的使用吧。在上面的實(shí)現(xiàn)中，我通過判斷設(shè)定了字體大小的范圍來避免上顯示過于夸張。二有的同學(xué)可能對的適配有點(diǎn)誤解。

最近看到這樣一個提問：我有一個750 x 1500尺寸的設(shè)計(jì)稿，設(shè)計(jì)稿上有一個150 x 50的按鈕，那么在寫頁面布局的時候，應(yīng)該如何確定按鈕的尺寸呢？。大多數(shù)同學(xué)在回答的時候提到了rem。但我發(fā)現(xiàn)很多同學(xué)對于rem的實(shí)際應(yīng)用還存在一點(diǎn)小小的疑問和誤解。

于是問題來了，rem到底是什么？rem是為了解決什么問題而存在的？rem能夠給我們帶來什么樣的便利？帶著這樣的問題，我們一起來總結(jié)一下rem的實(shí)踐。剛好工作中有一個移動端頁面的需求要做，就嘗試使用rem完成了一個小小的頁面適配。大家可以點(diǎn)擊這里，查看rem適配demo，

建議大家在chrome的device module下打開，通過切換不同手機(jī)的模擬器來查看不同尺寸下的區(qū)別。

rem是什么？

rem是一個相對于根元素字體大小的css單位。與px一樣，他可以用來設(shè)置字體大小，也可以用來設(shè)置長度單位。相對于根元素字體大小是什么意思？

舉個栗子。在頁面中，html元素是根元素，因此我們首先給html設(shè)置一個字體大小

html { font-size: 100px; }

于是，在整個頁面中，就有這樣的換算公式 ： 1rem = 100px

所以如果一個按鈕，有如下的css樣式，就等同于他的寬為100px，高50px.

btn { width: 1rem; height: 0.5rem; }

這就是rem這個知識點(diǎn)的所有真相了。

?。?！什么？這就完了？這和px有什么區(qū)別？

對啊，這和px本來就沒有特別的區(qū)別，就是一個尺寸單位嘛！

所以提問的那個同學(xué)拿著750x1500設(shè)計(jì)圖來問，當(dāng)我們設(shè)置為html的字體大小為100px時，
150x50的按鈕應(yīng)該在頁面里面寫什么尺寸？，用px就應(yīng)該寫 75x25，用rem就是 0.75 x 0.25.

真實(shí)寬度375px / 設(shè)計(jì)圖寬度750px = 按鈕真實(shí)寬度 / 設(shè)計(jì)圖按鈕寬度150px
==> 按鈕真實(shí)寬度 = 75px

又 1rem = 100px;   ==> 75px = 0.75rem

有的時候我們希望在設(shè)計(jì)圖直接量出來的尺寸不用除2直接得到rem的值，也就是說量出來是150px，那么用rem表示就是1.5rem。這個時候我們只需要修改html的字體大小為50px即可。那么計(jì)算思路就有一點(diǎn)不同。

真實(shí)寬度375px / 設(shè)計(jì)圖寬度750px = 按鈕真實(shí)寬度 / 設(shè)計(jì)圖按鈕寬度150px
==> 按鈕真實(shí)寬度 = 75px

又 1rem = 50px;   ==> 75px = 1.5rem

因此當(dāng)設(shè)計(jì)圖的尺寸發(fā)生改變時，我們需要根據(jù)上述思路，動態(tài)的調(diào)整html的字體大小，以達(dá)到我們想要的rem換算。

rem是為了解決什么問題而存在的？

以iphone各種手機(jī)的尺寸來說，iPhone4,5 寬度320px，iPhone6 375px，iPhone6 plus 414px. 如果一個按鈕，固定一個75x25的尺寸，那么就必然會導(dǎo)致在不同尺寸下的相對大小不一樣。這帶來的問題就在于會直接影響到設(shè)計(jì)的美觀，可能在iPhone6下，一個完美的設(shè)計(jì)圖，到了iPhone5,就變得low很多。 因?yàn)?，為了讓頁面元素的尺寸能夠在設(shè)備寬度變化的時候也跟著變化，rem就出現(xiàn)了。

我們已經(jīng)知道，rem的相對大小跟html元素的字體大小有關(guān)系。使用rem適配的原理就是我們只需要在設(shè)備寬度大小變化的時候，調(diào)整html的字體大小，那么頁面上所有使用rem單位的元素都會相應(yīng)的變化。 這也是rem與px最大的區(qū)別。

有css與js兩種方式來調(diào)整html元素大小的值。

css方式

html { font-size: calc(100vw / 3.75) }

100vw表示設(shè)備寬度，除以3.75這里是以iphone6 的寬度375px為標(biāo)準(zhǔn)，為了保證html的字體大小為100px。這樣我們在換算的時候，1px 就是0.01rem，就很容易計(jì)算。

因?yàn)閏hrome下最小字體大小為12px，所以不能把html的font-size設(shè)置成1px或者10px，100px是我們最好的選擇。

js方式， 原理與css一樣，不過為了避免在一些老舊一點(diǎn)的手機(jī)瀏覽器上不支持calc，vm這些屬性，在實(shí)際應(yīng)用中使用js是最好的。

!function () {
   function a() {
       var _width;
       var clientWidth = document.documentElement.clientWidth;
       if (clientWidth > 568) {
           _width = 568;
       } else if (clientWidth < 320) {
           _width = 320;
       } else {
               _width = clientWidth;
       }
       // var pageWid = (window.innerWidth > document.querySelector("body").offsetHeight) ? 1136 : 640;
       document.documentElement.style.fontSize = _width / 375 * 100 + "px";
   }
   var b = null;
   document.addEventListener("DOMContentLoaded", function () {
       window.addEventListener("resize", function () {
           clearTimeout(b);
           b = setTimeout(a, 300)
       }, !1);
       a()
   }, false);
}(window);

在實(shí)踐中還有一個關(guān)鍵的問題需要處理。就是無論如何js的加載會比css慢，因此如果我們就這樣的話，頁面的元素會有一個很明顯的閃爍過程，因?yàn)樵賘s加載進(jìn)來之前，html的字體大小還沒有達(dá)到我們想要的效果。因此通常我們需要在css中，給html的字體大小設(shè)置一個默認(rèn)值，以弱化這個閃爍的過程。默認(rèn)值的具體大小需要我們自行根據(jù)設(shè)計(jì)圖的尺寸，以及你想要的結(jié)果，通過上面我們介紹的計(jì)算思路去得出。

html {
  font-size: 100px;
}

需要注意的地方

一、rem的適用性很有局限，僅僅只能夠用于只在移動端展示的頁面。如果你的頁面還需要適配到pc端，那么就老老實(shí)實(shí)的使用px吧。在上面的實(shí)現(xiàn)中，我通過判斷設(shè)定了html字體大小的范圍來避免pc上顯示過于夸張。

二、有的同學(xué)可能對web的適配有點(diǎn)誤解。web中做適配并不需要考慮什么物理像素啊，dpi等等概念。這些應(yīng)該僅僅只是Android或者ios原生app才會考慮的問題。這些誤會導(dǎo)致許多搞設(shè)計(jì)的同學(xué)在給web app做設(shè)計(jì)的時候，也丟一張1080 x 1920 的設(shè)計(jì)稿過來，真是愁死人了。