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設定的大小一樣。