【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 5 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

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


沒有留言: