rem基于根元素font-size实现全局等比缩放，em依赖父元素字体大小用于局部文字关联适配；rem适合布局与整体控制，em适合padding、line-height等需随文字动态调整的细节，二者应按角色分工混用而非随意叠加。
移动端 H5 视口适配中，em 和 rem 都是相对单位，但作用基准完全不同——em 依赖父级字体大小，rem 只认根元素（html）的 font-size。混用不是随意叠加，而是按角色分工：rem 控制整体缩放节奏，em 负责局部与文字强关联的细节适配。
rem：全局等比缩放的核心工具
rem 的价值在于“一动全动”。只要动态设置 html { font-size: Xpx; }，所有用 rem 定义的字体、间距、宽高、圆角都会同比例变化，天然契合响应式布局。
- 设计稿以 375px 为基准时，常设
1rem = 16px，即html { font-size: 16px; }；屏幕宽度变为 750px 时，改为32px，所有 1rem 元素自动放大 2 倍 - JS 动态计算更可靠：
document.documentElement.style.fontSize = (clientWidth / 375) * 16 + 'px';，建议在 DOM 加载早期执行，避免 FOUC - viewport 必须正确声明：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">，否则 clientWidth 可能失真
em：局部跟随文字节奏的辅助单位
em 不参与全局缩放，它的意义是“绑定当前文字”。当父元素字号变化时，用 em 定义的 padding、line-height、图标尺寸会自动匹配，保持视觉协调。
- 按钮内边距写成
padding: 0.75em 1.25em;，文字变大时留白自然撑开，不会出现文字顶边或拥挤 - 图标尺寸用 em（如
width: 1.5em; height: 1.5em;），能始终与包裹它的文字等比，适合 iconfont 或 inline SVG - 慎用于多层嵌套容器——若父 div 字号是 14px，子 div 设
font-size: 0.8em;，再下一级又设margin: 1.2em;，实际值需逐层计算，易出错
什么时候该混用？关键看是否需要“解耦”
混用不是为了炫技，而是解决单一单位无法兼顾的问题：全局缩放要稳，局部节奏要活。
- 导航栏整体用 rem 定义高度和字体（随屏幕等比缩放），但每个菜单项的
padding用 em，确保文字增大时点击区域仍舒适 - 卡片容器宽高用 rem（保持网格结构稳定），卡片标题
line-height和margin-bottom用 em，让行距始终贴合当前字号 - 表单控件如 input，
height和font-size用 rem 统一缩放，但padding-left用 em，避免文字和边框间距在不同字号下失衡
哪些情况坚决不用 em 或 rem？
固定像素有其不可替代性，强行“响应式”反而破坏体验。
- 细线边框（
border: 1px solid #eee;）必须用 px，rem 在高清屏可能渲染成模糊的 2px 线 - 图标字体（如 iconfont）的
font-size推荐用 px 或 rem，但绝对不要用 em——它会因父级字号意外缩放，导致图标错位 - 动画关键帧中的位移（
transform: translateX(2px)）用 px 更精准，rem 在频繁重排时可能引入微小抖动
