CSS 的 em 單位與 CSS3 的 rem

CSS 的 em 樣式單位以父元素為依據進行設定,例如當 font-size 設為 2em ,字型的大小將以其父元素的兩倍呈現,相較於固定單位-例如 12px ,採用 em 要來得有彈性,但是對於巢狀結構的配置,em 會有副作用,例如以下的配置:

<div >
<div style="font-size: 2em;">
HTML5完美風暴 2em
     <div style="font-size: 2em;">HTML5從零開始 2em</div>
</div>
</div>

這是一個巢狀結構,儘管內外 div 的 font-size 均設為 2em ,但內層以其上一層為基準,因此會再度加倍,得到以下的結果:

HTML5完美風暴 2em
HTML5從零開始 2em

為了避免這種情形,可以選擇採用 rem 單位,調整上述的配置如下:

<div>
<div style="font-size: 2rem;">
HTML5完美風暴 2rem
     <div style="font-size: 2rem;">HTML5從零開始 2rem</div>
</div>
</div>

由於 rem 一律以最上層為依據,因此會得到完全相同的大小,結果如下:

HTML5完美風暴 2rem
HTML5從零開始 2rem


沒有留言: