CSS3教程:相對單位rem詳解

http://www.alixixi.com/web/a/2013062889595.shtml

http://www.alixixi.com/web/a/2013062889594.shtml

文章簡介：CSS3新增了一個相對單位rem（root em，根em），這個單位引發了普遍關注。這個單位與em有什麼區別呢？區別在於使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。

 

CSS3新增了一個相對單位rem（root em，根em），這個單位引發了普遍關注。這個單位與em有什麼區別呢？區別在於使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML 根元素。這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反 應。目前，除了IE8及更早版本外，全部瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略 用rem設定的字體大小。

 

CSS3的出現，他同時引進了一些新的屬性，包括咱們今天所說的rem。在W3C官網上是這樣描述rem的——「font size of the root element」 。

 

em單位是相對於父節點的font-size，會有一些組合的問題，而rem是相對於根節點（或者是html節點），也就是說你能夠在html節點 定義一個單獨的字體大小，而後全部其餘元素使用rem相對於這個字體的百分比進行設置，這樣就意味着，咱們只須要在根元素肯定一個參考值，在根元素中設置 多大的字體，這徹底能夠根據您本身的需.

 

例子:

 

html { font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/ } body { font-size: 1.4rem;/*1.4 × 10px = 14px */ } h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/ } p {font-size:14px; font-size:1.4rem;}/*IE8及以前版本的IE瀏覽器使用14像素*/

 

根元素中定義了一個基本字體大小爲62.5%（也就是10px。設置這個值主要方便計算，若是沒有設置，將是以「16px」爲基準 ）。

 

從上面的計算結果，咱們使用「rem尺寸字體」就像使用「px尺寸字體」同樣的方便。

 

這徹底能夠根據您本身的需，你們也能夠參考下圖：

在用戶使用「查看 > 文字大小」菜單調整網頁文本大小的時候，IE9及更早版本只能縮放以相對單位設定的文本（使用像素之類的絕對單位設定的文本沒法縮放）。換句話說，使用 rem單位在IE7和IE6中存在一個小小的反作用，那就是這些瀏覽器的用戶必須使用「查看 > 縮放」來調整整個頁面的大小。固然，這也算一個應該升級到現代瀏覽器的緣由吧。