px适用于border、icon等需固定像素的场景，rem是响应式主力但需主动设根字号，em适合组件内相对缩放但嵌套深时难推算，混用单位易导致行高失衡。
px适合固定像素值的场景，比如border和icon
当你需要一个边框始终是视觉上“一根细线”，或者图标必须严格占满 24×24 像素容器时，px 是唯一可靠的选择。浏览器缩放时，1px 边框可能被渲染为 1.5px 甚至模糊，但这恰恰是设计预期——它本就不该随缩放变粗。
px 在 border、icon、hr、box-shadow 的偏移值等地方几乎不可替代。但慎用于字体大小：用户在系统中设置“大号字体”后，font-size: 14px 仍强制显示为 14px，可读性会下降。
em适合组件内相对缩放，但嵌套两层以上就难推算
em 的计算基准是“最近那个设了 font-size 的父级”，不是根元素。所以它适合按钮内部的 padding 或 line-height：写 padding: 0.75em，能自然跟随按钮自身字号缩放。
但一旦父容器设了 font-size: 1.2em，子元素再写 1.5em，实际就是 1.2 × 1.5 = 1.8 倍根字号，中间过程无法直觉推算。用在 margin 或 padding 上时，若元素自身没显式声明 font-size，会回退到继承值，结果难预测。
立即学习“前端免费学习笔记（深入）”；
rem是响应式主力，但必须主动控制根字号
rem 只认 html 元素的 font-size，无论嵌套多深，1rem 永远等于那个值。这意味着你只需改一处，就能批量调整整站尺寸。默认浏览器根字号是 16px，所以 1rem === 16px；但别依赖这个默认值，显式写 html { font-size: 16px; } 更稳妥。
适配移动端常用做法：html { font-size: calc(100vw / 375 * 16); }（按 375px 设计稿宽度换算）。JavaScript 动态设置时，注意触发时机：document.documentElement.style.fontSize 应在 DOMContentLoaded 后执行，否则首次渲染可能取不到正确视口宽。
rem 对字体、间距、容器宽高都友好，但不适合做 border-width——没人希望边框随缩放变粗三倍。
混用单位会导致隐性耦合，行高失衡最常见
真正容易被忽略的是单位混用带来的隐性耦合：比如用 rem 写字体，却用 px 写 line-height，一旦根字号调整，line-height 就不会同比例变化，行距立刻失衡。
单位选择不是孤立决策，而是整个样式体系的契约。例如：font-size 用 rem，line-height 就该用无单位数值（如 1.5）或 rem；padding 和 margin 若统一用 rem，就不能突然插一个 px 值。
