核心区别总结
px (像素)
- 绝对单位：1px 等于显示器上的一个物理像素点
- 固定大小：不随其他元素变化
- 使用场景：边框、阴影、固定尺寸元素
- 响应式缺点：在不同设备上物理尺寸可能不同
em (相对单位)
- 相对基准：相对于当前元素的字体大小
- 继承特性：受父元素字体大小影响
- 复合效果：嵌套使用时尺寸会相乘
- 使用场景：组件内部尺寸、文本相关间距
rem (根相对单位)
- 相对基准：相对于根元素(html)的字体大小
- 一致性：不受父元素影响，提供统一比例
- 响应式优势：通过修改根字体大小可整体调整页面
- 使用场景：全局布局、字体大小、响应式设计
关键行为差异
-
嵌套行为：
- em 在嵌套中会累积计算（1.2em × 1.2em × 1.2em）
- rem 始终保持相同计算基准
-
响应式调整：
- 修改根元素字体大小会影响所有rem单位
- 修改父元素字体大小会影响其内部所有em单位
- px单位完全不受影响
-
默认比例：
- 在大多数浏览器中：1rem = 16px
- 1em = 当前元素字体大小（默认为16px）
最佳实践建议
- 优先使用rem：用于全局布局、字体大小、间距
- 合理使用em：用于组件内部比例关系
- 适当使用px：用于边框、阴影、固定尺寸元素
- 响应式技巧：通过媒体查询调整根元素字体大小
