元素的字體大小。下面通過(guò)代碼對(duì)比em和rem的區(qū)別。"/>
更新時(shí)間:2020年11月20日10時(shí)22分 來(lái)源:傳智播客 瀏覽次數(shù):
rem是CSS 3中新增的一種相對(duì)長(zhǎng)度單位。當(dāng)使用rem單位時(shí),根節(jié)點(diǎn)
的字體大小(font-size)決定了rem的尺寸。rem單位類似于em單位,em單位表示父元素字體大小,不同之處在于,rem的基準(zhǔn)是相對(duì)于
元素的字體大小。下面通過(guò)代碼對(duì)比em和rem的區(qū)別。(1)使用em單位,示例代碼如下。
div { font-size: 12px; }div > p { width: 10em; /* 結(jié)果為120px */ height: 10em; /* 結(jié)果為120px */}
上述代碼中,em單位是相對(duì)于父元素計(jì)算的,子元素的1em等于12px,因此10em就相當(dāng)于120px。
(2)使用rem單位,示例代碼如下。
html { font-size: 14px; } div { font-size: 12px; } div > p { width: 10rem; /* 結(jié)果為140px */ height: 10rem; /* 結(jié)果為140px */ }
上述代碼中,rem單位是相對(duì)于
元素計(jì)算的,因此10rem的結(jié)果為140px。與em單位相比,rem單位的優(yōu)勢(shì)在于,只通過(guò)修改
的文字大小,就可以改變整個(gè)頁(yè)面中的元素大小,使用起來(lái)更加方便。北京校區(qū)