px是固定像素单位，em依赖父元素font-size且基准动态切换，rem只参照根元素font-size；三者解决不同问题：px保精度，em适局部相对，rem统一大屏缩放。
px 是固定像素，em 依赖父元素 font-size，rem 只认 html 的 font-size —— 这三者不是“换种写法”，而是解决不同问题的工具，选错单位会导致响应式失效、嵌套错乱或缩放失灵。
为什么用 em 时尺寸突然变大或变小？
em 的计算基准会动态切换：用在 font-size 上时，参照父元素；用在 padding、margin 或 width 上时，参照当前元素自身的 font-size。嵌套越深，越容易失控。
- 父元素
font-size: 20px，子元素写font-size: 1.5em→ 实际是30px - 该子元素再设
padding: 1em→ 不是20px，而是30px（因为它用自己的字体大小作基准） - 如果父元素又用了
em设置字体，就会出现“1.2em × 1.5em × 1em”这种连乘效应
常见错误现象：button 内边距忽大忽小、文字行高在组件嵌套后塌陷、第三方 UI 库样式被意外放大。
为什么改了 html 的 font-size，rem 没反应？
根本原因只有两个：CSS 里没用 rem，或者 html 的 font-size 被其他规则覆盖了。浏览器默认是 16px，所以 1rem 默认 = 16px，但这个值可以被 JS 动态改，也能被 CSS 中更具体的规则干掉。
立即学习“前端免费学习笔记（深入）”；
- 检查是否写了
html { font-size: 10px; }，而不是body { font-size: 10px; } - 确认没有更高优先级的选择器（比如
:root或带!important的声明）覆盖了它 - 移动端常用 JS 动态设置：
document.documentElement.style.fontSize = window.innerWidth / 750 * 16 + 'px';，但要注意执行时机 —— 必须在 DOM 渲染前或DOMContentLoaded后立即执行
兼容性注意：rem 在 IE8+、所有现代浏览器都支持，但不支持 CSS 自定义属性（var(--size)）混用时的 fallback。
px 真的不能响应式？什么时候必须用它？
px 不是“过时”，而是“不可伸缩”。它在需要绝对像素精度的场景下不可替代，强行用 rem 反而引入误差。
- 边框（
border: 1px solid #ccc）：用rem会导致高 DPI 屏幕上模糊（如0.0625rem = 1px在 2x 屏上可能渲染为 1.5px） - 图标字体（
font-size: 16px）或 SVG 内联尺寸：缩放会失真，px保证图元对齐 - CSS 动画关键帧中位移量（
transform: translateX(2px)）：避免因根字体变化导致动画偏移量浮动
性能影响很小，但滥用 px 做全文本/容器尺寸，会让用户缩放页面时内容溢出或留白异常 —— 尤其在 iOS Safari 的「双击放大」或 Windows 高对比度模式下。
真正难的不是记住换算关系，而是判断某个 margin 是该随文本一起缩放（用 rem），还是该保持与物理像素对齐（用 px）。多数人卡在「以为 rem 就是万能响应式解」，却忘了它只解决「比例缩放」，不解决「设备像素适配」和「语义一致性」。
