1. 程式人生 > >rem與em的使用及區別

rem與em的使用及區別

當使用 rem 單位,他們轉化為畫素大小取決於頁根元素的字型大小,即 html 元素的字型大小。 根元素字型大小乘以你 rem 值。

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

fileCSS padding設定為 10remfile計算結果為160px

當使用em單位時,畫素值將是em值乘以使用em單位的元素的字型大小。

例如,如果一個 div 有 18px 字型大小,10em 將等同於 180px,即 10 × 18 = 180。

fileCSS padding設定為 10emfile計算到 180px (或接近它)

有一個比較普遍的誤解,認為 em 單位是相對於父元素的字型大小。 事實上,根據W3標準 ,它們是相對於使用em單位的元素的字型大小。

父元素的字型大小可以影響 em 值,但這種情況的發生,純粹是因為繼承。 讓我們看看為什麼以及如何起作用。