🎯 核心区别
- 百分比：相对于父元素的尺寸
- rem：相对于根元素的字体大小
🎯 总结对比
| 特性 | 百分比布局 | rem布局 |
|---|---|---|
| 参考基准 | 父元素尺寸 | 根元素字体大小 |
| 嵌套影响 | 层层依赖，复杂计算 | 统一基准，简单明了 |
| 响应式 | 需要多个断点调整 | 调整根字体即可 |
| 一致性 | 在不同容器中表现不一致 | 全局一致的比例关系 |
| 维护性 | 复杂，难以预测 | 简单，易于维护 |
| 适用场景 | 流式布局，填充父容器 | 组件化设计，响应式系统 |
最佳实践：
- 用百分比做流式布局（如：width: 100%）
- 用rem做组件尺寸和响应式设计
- 两者结合使用，发挥各自优势
