元素的字體大小。下面通過代碼對(duì)比em和rem的區(qū)別。" /> 国产无码喷水视频,91精品中综合久久久婷婷,亚洲AV无码专区在线电影成人
首頁技術(shù)文章正文

rem是什么?和em單位有什么區(qū)別?

更新時(shí)間:2020-11-20 來源:黑馬程序員 瀏覽量:

  rem是CSS 3中新增的一種相對(duì)長(zhǎng)度單位。當(dāng)使用rem單位時(shí),根節(jié)點(diǎn)<html>的字體大小(font-size)決定了rem的尺寸。

  rem單位類似于em單位,em單位表示父元素字體大小,不同之處在于,rem的基準(zhǔn)是相對(duì)于<html>元素的字體大小。下面通過代碼對(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ì)于<html>元素計(jì)算的,因此10rem的結(jié)果為140px。

  與em單位相比,rem單位的優(yōu)勢(shì)在于,只通過修改<html>的文字大小,就可以改變整個(gè)頁面中的元素大小,使用起來更加方便。

猜你喜歡:

移動(dòng)端應(yīng)用設(shè)備的網(wǎng)頁屏幕尺寸

JavaScript腳本文件引入方法講解

如何在列表中嵌套多重子列表?

黑馬程序員web前端培訓(xùn)課程 

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!