CSS 中 em 和 rem 单位的区别

135 阅读

发布时间 2022-01-09 21:57:42

最后更新 2022-01-09 21:57:42

CSS 尺寸单位有两种：
绝对单位：绝对单位是固定尺寸大小的，与任何的其他元素都无关，在任何情况下他都是固定相同的，绝对单位有 cm, mm, px 等；
相对单位：相对单位是相对于其他元素的尺寸大小，可能相对于父元素、HTML 元素或屏幕宽度，相对单位有 em, rem, vw, vh 等。

本文主要介绍相对单位中的 em 和 rem 单位，通过文字和示例说明两者之间的区别。

基本上，em 和 rem 都是可缩放的相对大小单位， em 单位相对于其父元素的字体大小，rem 单位则是相对于 HTML 文档的字体大小（rem 中的 "r" 代表 "root"）。

em 单位

em 单位允许设置元素相对于其父元素字体大小的数值，当父元素的字体大小改变时，被设置了 em 单位的子元素的属性的大小也会随之改变，比如 border, width, font-size 等属性。

<style>
	.父元素 {font-size:20px;}
	.子元素 {font-size:2em;margin:1.5em;}
</style>

<div class="父元素">
	我是父元素
	<div class="子元素">我是子元素</div>
</div>

输出效果：

rem 单位

rem 单位基于文档根元素的 font-size 值，也就是 <html> 元素。如果 <html> 元素没有指定字体大小，则使用浏览器默认值 16px。

<style>
	html {font-size:30px;}
	.父元素 {font-size:20px;}
	.子元素 {font-size:2rem;margin:1.5rem;}
</style>

<div class="父元素">
	我是父元素
	<div class="子元素">我是子元素</div>
</div>

输出效果：