摘要：移動(dòng)端的開發(fā)基本很少直接使用作為單位了，目前最常用的是。一般移動(dòng)端頁面的開發(fā)流程是設(shè)計(jì)人員以某個(gè)機(jī)型作為標(biāo)準(zhǔn)，設(shè)計(jì)好。前端開發(fā)針對(duì)這個(gè)機(jī)型的做開發(fā)，然后其它機(jī)型相對(duì)的去等比例縮放。

移動(dòng)端的開發(fā)基本很少直接使用px作為單位了，目前最常用的是rem。不過在這之前其實(shí)還有個(gè)em單位，和rem長得非常的像，那么它們有什么區(qū)別呢？又有什么不一樣的適用場(chǎng)景呢？

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

從title的解釋就可以看出，em的基準(zhǔn)是其父級(jí)元素，不過這個(gè)父級(jí)元素要求是設(shè)置有font-size值的，如下面的例子:

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

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

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

在這個(gè)基準(zhǔn)下，那么1rem的值也隨之得到了:

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

那么，不同屏幕的機(jī)型由于屏幕寬度不同，也就得到了在"屏幕寬度均分成10等份"這個(gè)標(biāo)準(zhǔn)下的rem相對(duì)值。比較完整的計(jì)算方式如下:

// 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()
  }
})

注意：這里的標(biāo)準(zhǔn) "10"可以是任一值，只要跟下面轉(zhuǎn)換公式中用到的標(biāo)準(zhǔn)值保持一致即可，這里只是為了計(jì)算方便才這么設(shè)定。

這樣，rem的基礎(chǔ)生態(tài)就搭建好了。那么如何基于這套標(biāo)準(zhǔn)應(yīng)用到開發(fā)中去呢?

在繼續(xù)之前，先來了解下"像素"這個(gè)知識(shí)點(diǎn)，因?yàn)榻酉聛矶紩?huì)用到它的概念。
  像素分為兩種：設(shè)備像素和CSS像素
  1、設(shè)備像素(device independent pixels): 設(shè)備屏幕的物理像素，任何設(shè)備的物理像素的數(shù)量都是固定的
  2、CSS像素(CSS pixels): 又稱為邏輯像素，是為web開發(fā)者創(chuàng)造的，在CSS和javascript中使用的一個(gè)抽象的層
  在pc端，css像素和物理像素是1:1的關(guān)系；而在移動(dòng)端，由于類似retina的各種高清屏的出現(xiàn)，css像素和物理像素的關(guān)系一般是1:2或者1:3，即1個(gè)css像素容納2到3個(gè)物理像素，實(shí)現(xiàn)高清的效果。

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

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

一般可以在sass中通過封裝預(yù)處理函數(shù)進(jìn)行這個(gè)轉(zhuǎn)換過程:

$UI_WIDTH: 750;

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

img{
  width: px2rem(140);
}

這就是"rem布局"原理的整個(gè)實(shí)現(xiàn)過程！

而隨著社區(qū)各種工具的完善，現(xiàn)在也無需手動(dòng)去使用如px2rem的這種預(yù)處理函數(shù)去轉(zhuǎn)換，比較流行的做法是使用postcss的postcss-px2rem插件去自動(dòng)處理，開發(fā)時(shí)仍然按照px的方式去編程，postcss配置例:

postcss: function() {
  return [px2rem({remUnit: 75})]; //設(shè)置基準(zhǔn)值，75是以iphone6的標(biāo)準(zhǔn)
}

這里的remUnit設(shè)置是有一定規(guī)則的，比如屏幕寬度等分成10份，當(dāng)UI以iphone6(即物理像素寬度750)設(shè)計(jì)時(shí)，remUnit=75；當(dāng)UI以iphone5(即物理像素寬度640)設(shè)計(jì)時(shí)，remUnit=64?？梢钥闯鏊凶裱缦鹿?

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

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

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

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

其他情況都使用rem

本文收錄在個(gè)人的Github上https://github.com/kekobin/bl... ,覺得有幫助的，歡迎start哈。支持原創(chuàng)，未經(jīng)本人同意，請(qǐng)勿轉(zhuǎn)載！