请解释 CSS 中 px、em 和 rem 这三种长度单位的区别，并分别说明它们各自适用的使用场景。

回答思路

1. 【回答框架 1】px 是绝对单位，代表屏幕上的物理像素点，大小固定，不受父元素或根元素影响。常用于需要精确定尺寸的场景，如边框宽度、1px 细线或某些固定尺寸的 UI 元素。
2. 【回答框架 2】em 是相对单位，相对于当前元素自身的 font-size。若自身未设置 font-size，则继承自父元素。em 会随上下文变化，使用不当容易产生累积缩放问题，常用于希望随字体大小等比缩放的内边距、外边距等场景。
3. 【回答框架 3】rem 是相对单位，相对于根元素（html）的 font-size，不受父元素影响，计算规则单一。适合用于全局性、响应式布局中的间距、字体大小等，便于统一管理和通过媒体查询调整基准值。
4. 【回答框架 4】选择场景：固定尺寸用 px；需要根据元素自身字号等比缩放且作用范围局部时用 em；需要全站统一缩放、响应式适配时用 rem。现代布局中 rem 常与媒体查询结合，而 em 适合局部组件内部缩放，px 适合精细控制。
5. 【回答框架 5】实际使用中要注意 em 的累积问题，以及 rem 只受根字号影响，在动态切换主题或字体偏好时需结合预处理或 CSS 变量来提升灵活性。
6. 【关键点 1】px 是绝对单位，不随其他因素变化；em 相对当前元素字号，会累积；rem 相对根元素字号，无累积。
7. 【关键点 2】rem 更适合全局响应式设计，em 适合局部组件内缩放，px 适合精确固定尺寸。
8. 【关键点 3】使用 rem 时通过调整根字体大小可整体缩放页面，但需注意浏览器默认字号大小。
9. 【易错点 1】不能简单认为 rem 一定比 em 好，局部组件内部使用 em 能更好地随自身字号缩放，而 rem 无法感知局部变化。
10. 【易错点 2】使用 em 时若嵌套层级过多，字体尺寸会累计放大，可能超出预期。
11. 【易错点 3】仅靠单位无法实现完整响应式，还需结合视口、媒体查询或容器查询等手段，不能过度依赖 rem 做所有尺寸适配。