rem与em的核心区别在于参照基准不同：rem始终相对于根元素（html）的字体大小，而em相对于当前元素的字体大小。选用时，全局布局尺寸推荐使用rem以确保一致性，局部组件或排版间距推荐使用em以实现继承和响应式缩放。
rem如何基于根元素进行全局布局
rem的值完全取决于标签上的font-size属性。在大多数浏览器中，默认根字体大小为16px，因此1rem等于16px。通过设置根元素的字体大小，可以统一控制整个页面的缩放比例，常用于移动端适配或无障碍访问调整。
<!DOCTYPE html>
<html style="font-size: 10px;">
<head>
<style>
body {
font-size: 1.6rem; /* 1.6 * 10px = 16px */
}
.container {
width: 75rem; /* 75 * 10px = 750px */
padding: 1rem; /* 10px */
}
</style>
</head>
<body>
<div class="container">内容</div>
</body>
</html>预期结果：容器宽度为750px，内边距为10px，正文文字大小为16px。无论嵌套层级多深，只要根元素font-size不变，rem计算结果恒定。
立即学习“前端免费学习笔记（深入）”；
em如何基于父元素进行局部缩放
em的值依赖于其直接父元素的computed font-size。如果父元素未显式设置font-size，则继续向上查找，直到根元素。这种机制使得em非常适合用于组件内部的比例缩放，例如按钮的内边距随字体大小自动调整。
<!DOCTYPE html>
<html style="font-size: 16px;">
<head>
<style>
.parent {
font-size: 20px;
}
.child {
font-size: 1.5em; /* 1.5 * 20px = 30px */
padding: 0.5em; /* 0.5 * 20px = 10px */
}
.grandchild {
font-size: 1.2em; /* 1.2 * 30px = 36px */
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<span class="grandchild">文本</span>
</div>
</div>
</body>
</html>预期结果：.child的文字大小为30px，内边距为10px；.grandchild的文字大小为36px。em的计算是链式的，每一层都基于上一层的实际渲染值。
嵌套层级过深时em的计算结果会怎样
当em在多层嵌套中使用且每层都定义font-size时，计算结果会逐层累积放大。例如上述代码中，.grandchild的36px是基于.parent的20px -> .child的30px -> .grandchild的36px逐步推导而来。若某一层级未设置font-size，则继承父级值，em计算仍基于该继承值。这种特性可能导致意外的大尺寸，需在设计系统时严格控制嵌套深度或改用rem避免累积效应。
