RWD時， font-size 的單位

很久很久以前，web designer 只要考慮IE6 7 8 的時候，字體單位，只要用px就萬事OK。
有一天， 一個叫賈伯斯的人，拿出了一台iPad，從此....

px

優點：PhotoShop與CSS 通用

缺點：在移動裝置無擴充性

em

優點：在移動裝置有彈性

缺點：

1. PhotoShop上沒有em，從PhotoShop 的 px 轉換 em 要用猜的
2. 巢狀結構時具有繼承性（如下圖：第二層變成 2*2 = 4em）
   

rem

優點：

1. CSS3新增的一個相對單位（root em，根em）
2. 移動裝置上有彈性
3. 不繼承
4. 透過設定，能簡易與 px 換算

缺點：

2. PhotoShop上沒有em，從PhotoShop 的 px 轉換 em 要用猜的
3. 巢狀結構時具有繼承性（如下圖：第二層變成 2*2 = 4em）

目前採用rem，寫法如下

html { font-size:62.5%;} /*  相當於 10px*/

body { font-size:1.6rem; line-height: 1.5; font-family: "微軟正黑體", "Microsoft JhengHei";}

h1 { font-size: 4.0rem; } /* = 40px*/

h2 { font-size: 3.6rem; } /* = 36px*/