深刻理解CSS中em, rem, ex區別，及使用技巧

CSS 中常見尺寸

單位	描述
%	百分比
in	英寸
cm	釐米
mm	毫米
ex	一個 ex 是一個字體的 x-height。 (x-height 一般是字體尺寸的一半。)
pt	磅 (1 pt 等於 1/72 英寸)
pc	12 點活字 (1 pc 等於 12 點)
px	像素 (計算機屏幕上的一個點)
em	1em 等於當前的字體尺寸。 2em 等於當前字體尺寸的兩倍。 例如，若是某元素以 12pt 顯示，那麼 2em 是24pt。 在 CSS 中，em 是很是有用的單位，由於它能夠自動適應用戶所使用的字體。
rem	rem表示「Root EM」,字面上指的是根元素的em大小。 在Web文檔的上下文中，根元素就是你的html元素。 若是沒有重置，html默認font-size:16px。

---

em 和 rem 比較

單位	特色
em	相對單位em是相對於元素自己的字體大小的。 在css中惟一例外的是font-size屬性，它的em和ex值指的是相對父元素的字體大小。
rem	集相對大小和絕對大小的優勢於一身， 經過它既能夠作到只修改根元素就成比例地調整全部字體大小， 又能夠避免（使用em）字體大小逐層複合的連鎖反應

---

em 缺點

1. em 的值並非固定的；
2. em 會繼承父級元素的字體大小。

舉例

body{
  font-size: 10px;
}

h2{
  display: block;
  width: 80%;
  font-size: 1.5em;
  margin: 0.5em;
}

h2的字體大小繼承了 body字體， 10px * 1.5 = 15px
h2的margin屬性則是相對於本元素字體大小： 15px * 0.5 = 7.5px
以下圖所示

---

rem 使用小技巧

1. body選擇器中聲明Font-size=62.5%;
2. 將你的原來的px數值除以10，而後換上rem做爲單位；

---

參考文章連接

css中單位em和rem
完全弄懂css中單位px和em,rem的區別