在介绍rem之前，先介绍单位em。em是相对于父元素的字体大小来说的，使用的时候要有父元素，且父元素要有字体大小。
<body>
<div>
<p></p>
</div>
</body><style>
div {
font-size: 12px;
}
/* 1. em是相对于父元素的字体大小来说的 */
p {
/* 10em就是10*12=120px */
width: 10em;
height: 10em;
background-color: pink;
}
</style>与em不同的是，rem不是相对于父级元素的字体大小，而是相对于html元素的字体大小，所以叫做root em。
<body>
<div>
<p></p>
</div>
</body><style>
html {
font-size: 14px;
}
div {
font-size: 12px;
}
/* 2. rem是相对于html元素的字体大小来说的 */
p {
/* 10rem就是10*14=140px */
width: 10rem;
height: 10rem;
background-color: pink;
/* 这就生成了140px*140px的粉色盒子了 */
}
</style>rem的优点就是可以通过修改html里面文字的大小来改变页面中元素的大小可以整体控制。
原文：https://www.cnblogs.com/deer-cen/p/12128426.html