響應式網頁設置網頁字體大小自適應

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

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

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

好比默認的 html font-size=16px，那麼我想設置12px 的文字就是：12÷16=0.75（rem）

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

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

1  html{font-size:62.5%; /* 10÷16=62.5% */}
2  body{font-size:12px;font-size:1.2rem ; /* 12÷10=1.2 */}
3  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。