em和rem都是相对单位，是随着别的单位变化而变化的
1.em是相对于自己的父级元素变化的比如下面这个例子中的box1和box2，他是相对于container盒子字体变化而变化的，当container盒子字体变大或者缩小时，box1和box2也会变大和缩小。
<template>
<div class="container">
我是container,字体大小是16px
<div class="box1">
粉色的盒子字体大小是16px,我的字体大小是1em,我和粉色盒子的字体大小一样
</div>
<div class="box2">
我的字体大小是2em,我是粉色盒子字体大小的2倍
</div>
<div class="box3">
我的字体大小是1rem,我是相对于html字体的大小的,所以我和html字体大小一样。当html字体变化的时候我也在变化
</div>
</div>
</template>
<script>
</script>
<style>
html{
font-size: 20px;
}
.container{
width: 500px;
height: 300px;
background-color: pink;
font-size:16px;
margin: 100px auto;
}
.box1{
width: 500px;
height: 50px;
background-color:#00FFFF;
font-size: 1em;
}
.box2{
width: 500px;
height: 100px;
background-color:#6A5ACD;
font-size: 2em;
}
.box3{
width: 500px;
height: 100px;
background-color: #8D211F;
font-size: 1rem;
}
</style>
2. rem是相对于对根元素HTML字体大小变化的，只随着HTML变化。比如例子中的box3是1rem，就是跟HTML设置的大小一样。