響應式網頁設計:rem、em設置網頁字體大小自適應

「rem」是指根元素（rootelement，html）的字體大小，好開心的是，從遙遠的IE6到版本帝Chrome他們都約好了，根元素默認的font-size都是16px。這樣一個新的單位兼容性如何呢？

IE9+，Firefox、Chrome、Safari、Opera的主流版本都支持了，我可以放肆的使用rem了。

em的計算是基于父級元素的，在實際使用中給我們的計算帶來了很大的不便。所以rem的出現解救了我這樣不會算術的人，再也不用擔心父級元素的font-size了，因為它始終是基于根元素（html）的。

比如默認的htmlfont-size=16px，那么我想設置12px的文字就是：12÷16=0.75（rem）

當然，你可以引入CSS預處理工具（Sass、LESS、Stylus等）自動計算rem值，這里就不一一舉例了。

但是像我這樣的懶人或者團隊開發中還沒有引入CSS預處理工具的該腫么辦呢？只能搬個計算器啪啪啪了嗎？別急，你還可以變通一下。我們改變一下html的默認font-size=10px不就好計算了嘛！Likethis：

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

需要注意的是，為了兼容不支持rem的瀏覽器，我們需要在rem前面寫上對應的px值，這樣不支持的瀏覽器可以優雅降級。其實不用太糾結是默認的font-size:100%，還是設置為font-size:62.5%，如果你引入了CSS預處理工具那么自然可以使用默認值，如果由于其他原因使用font-size:62.5%也無可厚非，完全可以在body中重置回你需要的默認font-size。