简单来说em单位的大小是根据父元素的font-size的大小来决定的,而rem是根据html的font-size的大小来决定的,话不多说,直接上代码和图解
<!DOCTYPE html>
<html lang="en" style="font-size: 200px;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>em和rem</title>
</head>
<body>
<div style="font-size: 100px;">
<div style="width: 1em; height: 1em; background: green;"></div>
</div>
<div style="width: 1rem; height: 1rem; background: pink;"></div>
</body>
</html>
父盒子的font-size为100px,所以1em = 100px
html的font-size为200px,所以1rem = 200px