用rem設置文字大小

1、px與em

用px設置文字大小是再正常不過的事情，好比

html {font-size: 12px;}

隨處可見的在設置width、height使用px，這也是細緻穩妥的設置方法，這樣作的缺點在於調整瀏覽器的文字大小並未影響以px爲單位的文本，這對一部分用戶形成了不便。

用em設置文字大小彌補了這個問題，em是一個相對單位。文字大小用em表示的狀況下，能夠隨着瀏覽器字號（好比在chrome下「設置->高級設置->字號」）的變大（變小）而變大（變小），使用格式與px基本同樣，好比

p {font-size: 1em;}

以上面這個p元素爲例，em的計算方式是這樣的：

1. 若p的父元素設置了文字大小，如font-size:20px，則1em=20px；
2. 若父元素沒有設置文字大小，則繼續尋找上層節點的文字大小，直到根節點html；
3. 若根節點html沒有設置文字大小，則取瀏覽器默認文字大小16px。

使用em有一個使人頭疼的地方：

假設的文檔結構是這樣的：html>p>span，樣式是這樣的：

html {
    font-size: 62.5%;/* 10px÷16px=62.5% */
}
p {
font-size: 1.4em;/* 14px */
}

如今我想設置span的文字大小爲12px，我須要計算12/14=85.7%

span {
    font-size: 0.857em/* 12px/14px=85.7% */
}

若還要設置span裏面子節點的文字大小，計算會愈來愈痛苦。。。

這就是該rem出現的時候了。

2、rem

在CSS3中引入了rem，rem是指根元素（root element，html）的文字大小，IE9+與Firefox、Chrome、Safari、Opera等主流版本都支持。

設置過根節點的文字大小後，全部子節點的文字大小所有相對於根節點計算。好比html爲10px，則1.2rem=12px，2rem=20px...以此類推。

html {
    font-size: 62.5%;/* 10px÷16px=62.5% */
}
p {
    font-size: 14px;
    font-size: 1.4rem;
}
span {
    font-size: 12px;
    font-size: 1.2rem;
}

爲了兼容不支持rem的瀏覽器，要在設置rem的前面寫上對應的px值，實現優雅降級。

使用rem的好處是：它具備em的相對特性（相對瀏覽器），又不會像em同樣難以計算和控制。