em，rem區別比較

rem是基於html元素的字體大小來決定，而em則根據使用它的元素的大小決定。

注意：不少人錯誤覺得em是根據父類元素，其實是使用它的元素繼承了父類元素的屬性纔會產生的錯覺。

 

主要區別

em 和 rem 單位之間的區別是瀏覽器根據誰來轉化成px值 理解這種差別是決定什麼時候使用哪一個單元的關鍵。

 

rem單位如何轉換爲像素值

當使用 rem 單位，他們轉化爲像素大小取決於頁根元素的字體大小，即 html 元素的字體大小。 根元素字體大小乘以你 rem 值。

例如，根元素的字體大小 16px，10rem 將等同於 160px，即 10 x 16 = 160。

 

em單位如何轉換爲像素值

當使用em單位時，像素值將是em值乘以使用em單位的元素的字體大小。

例如，若是一個 div 有 18px 字體大小，10em 將等同於 180px，即 10 × 18 = 180。

 

重點理解：

有一個比較廣泛的誤解，認爲 em 單位是相對於父元素的字體大小。 事實上，根據W3標準 ，它們是相對於使用em單位的元素的字體大小。·

父元素的字體大小能夠影響 em 值，但這種狀況的發生，純粹是由於繼承。 讓咱們看看爲何以及如何起做用。

 

em單位的遺傳效果

若是咱們的根元素字體大小爲 16px (一般是默認值) 一個子元素 div 裏面padding值爲 1.5em，該 div 將從根元素繼承字體大小 16px。 所以padding會翻譯成 24px，即 1.5 x 16 = 24。·

若是咱們加多一個div來包裹原先的div，而後設置其字體大小爲 1.25em呢?

咱們包裹的 div 繼承根元素字體大小 16px ，並乘以它本身的 1.25em 的字體大小。 這將設置包裹 div 字體大小爲 20px，即 1.25 x 16 = 20。

如今咱們原始的 div 再也不直接從根元素繼承,而是從其新的父元素繼承字體大小爲 20px 1.5em 其padding值如今等於 30px，即 1.5 x 20 = 30。

這個繼承效應能夠更復雜，若是咱們向咱們原始的 div 添加 em 字體單位，比方說 1.2em。

Div 從其父級繼承 20px 字體大小，而後，乘以它本身的 1.2em 設置，給它 24px，即 1.2 × 20 = 24 新字體大小。

div上的1.5em padding 如今將再次改變大小，用新的字體大小，36px，即 1.5 × 24 = 36 。

最後，爲了進一步說明那個 em 單位是相對於他們最終得到(不是父元素)的字體大小，讓咱們來看看設置padding 1.5em 若是咱們顯式設置 div 使用 14px值，不繼承字體大小會發生什麼。

如今，咱們的padding爲 21px，即 1.5 x 14 = 21 已經變小了。 它不受父元素的字體大小。

因爲存在着這些隱患，你能夠看到爲何必須知道如何正確管理使用 em 單位。

 

瀏覽器設置HTML元素字體大小的影響

每一個瀏覽器都有默認的字體大小，若是你沒有本身重寫根html元素的字體大小，而後後面直接用em或rem的形式表達，那麼每一個瀏覽器的樣式都不同。

 

建議

em用於非默認字體大小的元素上的padding、 margin、 width、 height和line-height等值。

rem用於設置元素的字體大小

 

文章參考

http://caibaojian.com/rem-vs-em.html