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

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

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

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

rem是什么？

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

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

html { font-size: 100px; }

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

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

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

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

?。。∈裁矗窟@就完了？這和px有什么區(qū)別？

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

所以提問的那個(gè)同學(xué)拿著750x1500設(shè)計(jì)圖來(lái)問，當(dāng)我們?cè)O(shè)置為html的字體大小為100px時(shí)，
150x50的按鈕應(yīng)該在頁(yè)面里面寫什么尺寸？，用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í)候我們希望在設(shè)計(jì)圖直接量出來(lái)的尺寸不用除2直接得到rem的值，也就是說量出來(lái)是150px，那么用rem表示就是1.5rem。這個(gè)時(shí)候我們只需要修改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ā)生改變時(shí)，我們需要根據(jù)上述思路，動(dòng)態(tài)的調(diào)整html的字體大小，以達(dá)到我們想要的rem換算。

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

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

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

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

css方式

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

100vw表示設(shè)備寬度，除以3.75這里是以iphone6 的寬度375px為標(biāo)準(zhǔn)，為了保證html的字體大小為100px。這樣我們?cè)趽Q算的時(shí)候，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í)踐中還有一個(gè)關(guān)鍵的問題需要處理。就是無(wú)論如何js的加載會(huì)比css慢，因此如果我們就這樣的話，頁(yè)面的元素會(huì)有一個(gè)很明顯的閃爍過程，因?yàn)樵賘s加載進(jìn)來(lái)之前，html的字體大小還沒有達(dá)到我們想要的效果。因此通常我們需要在css中，給html的字體大小設(shè)置一個(gè)默認(rèn)值，以弱化這個(gè)閃爍的過程。默認(rèn)值的具體大小需要我們自行根據(jù)設(shè)計(jì)圖的尺寸，以及你想要的結(jié)果，通過上面我們介紹的計(jì)算思路去得出。

html {
  font-size: 100px;
}

需要注意的地方

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

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