CSS 中 em 和 rem 单位的区别
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>
输出效果:
