em和rem单位

article/2025/9/19 4:02:14

我们在制作web端页面时，基本都是使用像素px作为单位，但是我们知道移动端设备具有多种多样的宽度，而使用物理单位在不同宽度和不同分辨率的手机上会有一定差异，那么在某些设备可能就会出现页面不美观的问题。所以为了解决此问题，移动端推荐使用rem作为单位。

我们知道还有个常见单位是em，那么它们之间有什么区别呢？

1.em单位

em是一个相对单位，是相对父元素字体大小的。

<style>div {font-size: 18px;  /* 设置父元素的字体大小 */}span:nth-child(1) {font-size: 1em;   /* 1em相当于1*18px=18px */}span:nth-child(2) {font-size: 18px;}
</style>
<body><div><span>em单位如何确定</span><br><span>em单位如何确定</span></div>
</body>
上面的代码两个span标签里面的文字是一样的，虽然第一个span标签设置的字体为1em，第二个span标签设置的字体大小为18px，但是最后得到的效果是一模一样的。

这是因为span的父元素div设置的字体大小为18px，所以1em=18px。

这也间接验证了em单位是相对于父元素而言的。

2. rem单位

rem (root em)也是一个相对单位，不同的是rem的基准是相对于html元素的字体大小。

<style>html {font-size: 30px;    /* 设置根元素字体大小为30px */}div {width: 15rem;      /* div盒子宽度设置为15rem=15*30px=450px */height: 2rem;      /* div盒子高度设置为2rem=2*30px=60px */background-color: pink;font-size: 1rem;   /* div盒子里的文字大小设置为1rem=1*30px=30px */}span {font-size: 30px;}
</style>
</head><body><div>rem单位相对html字体大小</div><span>rem单位相对html字体大小</span>
</body>
比如，上述代码中根元素（html）设置font-size=30px; 然后给div元素设置width:15rem; 则换成px就是450px，高度设置2rem，换算过来为60px，字体大小为1rem，换算过来为30px。上图得到的效果也是验证了rem单位的确是相对于根元素字体大小而言的。

1rem=根元素html设置的字体大小，如刚刚例子中就是1rem=30px；