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

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

　　rem是CSS 3中新增的一種相對長度單位。當使用rem單位時，根節(jié)點<html>的字體大小(font-size)決定了rem的尺寸。

　　rem單位類似于em單位，em單位表示父元素字體大小，不同之處在于，rem的基準是相對于<html>元素的字體大小。下面通過代碼對比em和rem的區(qū)別。

　　(1)使用em單位，示例代碼如下。

div { font-size: 12px;
}div > p { width: 10em;    /* 結(jié)果為120px */
 height: 10em;   /* 結(jié)果為120px */}

　　上述代碼中，em單位是相對于父元素計算的，子元素的1em等于12px，因此10em就相當于120px。

　　(2)使用rem單位，示例代碼如下。

html {
 font-size: 14px;
}
div {
 font-size: 12px;
}
div > p {
 width: 10rem;    /* 結(jié)果為140px */
 height: 10rem;   /* 結(jié)果為140px */
}

　　上述代碼中，rem單位是相對于<html>元素計算的，因此10rem的結(jié)果為140px。

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

猜你喜歡：

移動端應用設備的網(wǎng)頁屏幕尺寸

最新資訊