（高階）用CSS3新增的rem單位設定字型大小

本文節選自《CSS設計指南（第3版》。
第1章完全免費試讀，電子書線上熱賣中：http://www.ituring.com.cn/book/1111

以下內容節選自第4章。

CSS3新增了一個相對單位rem（root em，根em），這個單位引起了廣泛關注。這個單位與em有什麼區別呢？區別在於使用rem為元素設定字型大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層複合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支援rem。對於不支援它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的宣告。這些瀏覽器會忽略用rem設定的字型大小。下面就是一個例子：

/*IE8及之前版本的IE瀏覽器使用14畫素*/
p {font-size:14px; font-size:.875rem;}

在使用者使用“檢視 > 文字大小”選單調整網頁文字大小的時候，IE9及更早版本只能縮放以相對單位設定的文字（使用畫素之類的絕對單位設定的文字無法縮放）。換句話說，使用rem單位在IE7和IE6中存在一個小小的副作用，那就是這些瀏覽器的使用者必須使用“檢視 > 縮放”來調整整個頁面的大小。當然，這也算一個應該升級到現代瀏覽器的原因吧。