使用相對單位，比如 rem 或 em 是網頁版面設計(typography)最佳實踐中的一種。該使用哪一個一直存在各種爭論。
下面文章將詳細介紹這2個相對單位 rem, em,以及如何在模塊組件中使用它們。
一.什么是EM
1.設置 font-size 的值
如果選擇器中的 font-size 屬性為 20px, 則 1em = 20px
h1 { font-size: 20px } //則 1em = 20px
p {font-size: 16px} // 則 1em = 16px
em 單位能用于聲明 font-sizes，那下面這種情況是表示什么意思呢？
h1 { font-size: 2em } // h1的字體到底多大呢？
我們必須查看h1的父元素才能計算h1字體大小， 假設它的父元素是 html（默認字體大小為16px）,則可以知道h1字體大小為： 16 px * 2 = 32px,即：
html { font-size: 16px }
h1 { font-size: 2em } // 32px
盡管這樣可行，但是這不是一個好想法，因為這會重寫用戶瀏覽器設置， 我們可以選擇 percentage值：
html { font-size: 100% } // 這默認表示16px
2.使用 em 設置margin,padding值
除了能夠設置 font-size 的值外， em 還可以設置 padding 和 margin 值， 這也是很多人感到迷惑的地方。
看下下面代碼，h1 和 p 的 margin-bottom 值分別是多少？（假設html的font-size設置為100%）：
h1
font-size: 2em // 1em = 16px, 2em = 32px
margin-botton: 1em // 1em = 32px
p
font-size: 1em // 1em = 16px
margin-bottom: 1em // 1em = 16px
是否會感到驚訝， 2個元素的 margin-bottom 值居然不相同？
這種現象出現的原因是： 1em 等于自身 font-size 的值， 因此 h1當前字體大小為32px, 因此 1em = 32px, 下面的p元素 1em = 16px。
在不同的代碼環境下， 1em 的值也各不相同， 這讓開始使用 em的人感到很困惑，但這就是em。
二.什么是REM
rem 表示 ROOT EM， 它的出現是為了讓人們從 em 復雜的計算中解脫出來。
這是一個頁面設計單位，相當于根字體大小， 這意味著 1rem 永遠等同 html 中 font-size 的大小。
看下下面代碼：
h1
font-size: 2rem
margin-bottom: 1rem // 1rem = 16px
p
font-size: 1rem
margin-bottom: 1rem // 1rem = 16px
可以看出： 1rem 永遠等于 16px，不論你在哪里設置它，除非你改變html font-size的值。
這就是rem，易于理解，并且環境獨立 ,一旦你知道了什么是 em,你就很容易理解它。
三.使用 REMs 還是 EMs
這個話題具有爭議性。
有些人完全避免使用rem,認為它會降低組件的模塊性；而有些人幾乎全部使用rem,因為它的簡潔性。
em能夠幫助模塊化組件，但是會給代碼帶來復雜度； rem 使計算變得簡單，但是對模塊化組件不友好。因此，rem | em各有優缺點，因此要根據具體使用情形來使用。
基本的2個原則：
- 如果屬性要依據
font-size進行縮放，則使用em - 其余的使用
rem
1.具體實例： 對Header元素只使用REMs
下面jade代碼
h2.header this is a header
僅使用rem:
.header
font-size: 1rem
padding: 0.5rem 0.75rem
background: pink
假如我們創建一個稍微大一點的header元素，字體大小和padding值都是上面h2的2倍
a.header.large-header this is big header
a
display: block
.large-header
font-size: 2rem
僅僅這樣設置，會發現padding值并沒有變成h2的2倍，所以要重寫一下padding:
.large-header
font-size: 2rem
padding: 1rem 1.5rem
這樣就完成，但是我們發現這樣會造成代碼重復， 假如我們有更多這樣的需要大小差異的元素，我們會發現重復的代碼會更多，我們可以將 .header 中要隨尺寸縮放的padding值，設置為 em, 這樣就可以不用重復聲明了
.header
font-size: 1rem
padding: 0.5em 0.75em
background: pink
.large-header
font-size: 2em
// 根據 font-size 的值，padding自動縮放
2.對header元素只使用 EMs
比如：
.header.header--large A header element
p lorem
p lorem
.header A header element smaller
p lorem
只使用em：
.header
font-size: 1em
padding: 0.5em 0.75em
background: pink
.header--large
font-size: 2em
p
margin-left: 0.75em
margin-right: 0.75em
我們會發現，.header--large 中的文字離左邊的padding值也進行了縮放，導致2個標題距離左邊距不對齊，可以進行下面設置
.header--large
font-size: 2em
padding-left: 0.375em
// 因為font-size變為2倍，這里變為1/2就相等了
padding-right: 0.375em
可以看出這樣也會造成代碼冗余，可以把padding-left,padding-right的值設置為rem,這樣就不會進行自動縮放了
.header
font-size: 1em
padding: 0.5em 0.75rem // 僅僅把這里0.75em改為 0.75rem
background: pink
.header--large
font-size: 2em
總結
使用那種單位依據使用情形而定，一般如果屬性要依據 font-size 進行縮放，則使用 em，其余的情形使用 rem。另外使用媒體查詢時，最好是使用 em, 因為 rem 會在safari瀏覽器中出現bug。
原文鏈接：
