摘要：移動端的開發基本很少直接使用作為單位了，目前最常用的是。一般移動端頁面的開發流程是設計人員以某個機型作為標準，設計好。前端開發針對這個機型的做開發，然后其它機型相對的去等比例縮放。

移動端的開發基本很少直接使用px作為單位了，目前最常用的是rem。不過在這之前其實還有個em單位，和rem長得非常的像，那么它們有什么區別呢？又有什么不一樣的適用場景呢？

注意：無論使用em，還是rem，客戶端最終解析的值依舊是px！

從title的解釋就可以看出，em的基準是其父級元素，不過這個父級元素要求是設置有font-size值的，如下面的例子:

那么son的字體大小就是2 * 20px = 40px，此時，如果father的字體大小變化了，那么son的也會跟著變化。假如沒有父元素，則基準就是body（由于默認瀏覽器默認字體為16px，所以默認情況1em=16px）。

跟上面解釋body基準時的差不多，默認情況下1rem=16px。此時，只要根元素字體大小不變，那么相對于它的rem就不會變。
對于移動端的各種機型來講，由于不同的機型屏幕尺寸、分辨率都不一樣，不太可能使用相同的根元素字體大小作為基準，所以所謂rem布局，就是通過js動態計算出不同機型的根元素字體大小值，來對頁面進行等比例的縮放，達到適配大部分機型的效果。
那么具體如何去設定這個基準呢？
假設把手機屏幕寬度均分成10等份(因為rem布局就是針對寬度去做設定的)，規定其中的一份作為根元素的font-size值，那么根元素font-size值就可由下述公式獲得:

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + "px";

在這個基準下，那么1rem的值也隨之得到了:

1rem = document.documentElementstyle..fontSize = document.documentElement.clientWidth / 10 + "px";

那么，不同屏幕的機型由于屏幕寬度不同，也就得到了在"屏幕寬度均分成10等份"這個標準下的rem相對值。比較完整的計算方式如下:

// set 1rem = viewWidth / 10
function setRemUnit () {
  var rem = docEl.clientWidth / 10
  docEl.style.fontSize = rem + "px"
}

setRemUnit()

// reset rem unit on page resize
window.addEventListener("resize", setRemUnit)
window.addEventListener("pageshow", function (e) {
  if (e.persisted) {
    setRemUnit()
  }
})

注意：這里的標準 "10"可以是任一值，只要跟下面轉換公式中用到的標準值保持一致即可，這里只是為了計算方便才這么設定。

這樣，rem的基礎生態就搭建好了。那么如何基于這套標準應用到開發中去呢?

在繼續之前，先來了解下"像素"這個知識點，因為接下來都會用到它的概念。
  像素分為兩種：設備像素和CSS像素
  1、設備像素(device independent pixels): 設備屏幕的物理像素，任何設備的物理像素的數量都是固定的
  2、CSS像素(CSS pixels): 又稱為邏輯像素，是為web開發者創造的，在CSS和javascript中使用的一個抽象的層
  在pc端，css像素和物理像素是1:1的關系；而在移動端，由于類似retina的各種高清屏的出現，css像素和物理像素的關系一般是1:2或者1:3，即1個css像素容納2到3個物理像素，實現高清的效果。

一般移動端頁面的開發流程是：設計人員以某個機型作為標準，設計好UI。前端開發針對這個機型的UI做開發，然后其它機型相對的去等比例縮放。
這里以iphone6作為標準(因為實際開發中基本也是用它做設計)，它的物理像素為750x1334，css像素為375*667，假設UI上圖片a的寬度為140，那么如何把它轉換成以rem為單位的值呢？
現在屏幕寬度是已知的10rem，要求UI上寬140的rem值，假設為X，由下圖可以很容易的得到比例關系:

屏幕寬度/UI寬度 ＝ x/140 ＝ 10rem / 750
＝》
x = 140 / 750 * 10 rem

一般可以在sass中通過封裝預處理函數進行這個轉換過程:

$UI_WIDTH: 750;

@function px2rem($px) {
  @return ${ $px / $UI_WIDTH * 10 }rem;
//=>or @return ${ $px / 75 }rem;
}

img{
  width: px2rem(140);
}

這就是"rem布局"原理的整個實現過程！

而隨著社區各種工具的完善，現在也無需手動去使用如px2rem的這種預處理函數去轉換，比較流行的做法是使用postcss的postcss-px2rem插件去自動處理，開發時仍然按照px的方式去編程，postcss配置例:

postcss: function() {
  return [px2rem({remUnit: 75})]; //設置基準值，75是以iphone6的標準
}

這里的remUnit設置是有一定規則的，比如屏幕寬度等分成10份，當UI以iphone6(即物理像素寬度750)設計時，remUnit=75；當UI以iphone5(即物理像素寬度640)設計時，remUnit=64。可以看出它中遵循如下公式:

remUnit = 物理像素寬度 / 設定的屏幕寬度等分值；

至于具體的js等分邏輯封裝可以參看手淘的flexible。

那么在實際開發中，究竟適用em還是rem呢？記住如下原則即可:

如果屬性值根據元素的font-size獲得，則使用em，如padding、margin、line-height等

其他情況都使用rem

本文收錄在個人的Github上https://github.com/kekobin/bl... ,覺得有幫助的，歡迎start哈。支持原創，未經本人同意，請勿轉載！