px/em/rem/vw/vh 区别优缺点

像素 (px)

特点

• 固定单位：1px 等于屏幕上的一个物理像素点
• 精确度高：适合需要精确尺寸的场景
• 不受其他因素影响：大小固定，不随父元素或根元素字体大小变化

优点

• 尺寸精确，易于控制
• 兼容性好，所有浏览器都支持
• 适合边框、阴影等需要精确尺寸的元素

缺点

• 不响应式，在不同屏幕尺寸下可能显示效果不一致
• 无法根据用户设置的字体大小自动调整

相对单位 (em)

特点

• 相对于父元素字体大小：1em 等于父元素的字体大小
• 可继承性：子元素的 em 会继承父元素的字体大小
• 嵌套影响：多层嵌套时，em 值会层层累积

优点

• 响应式，会随父元素字体大小变化
• 适合需要相对比例的场景
• 保持元素间的比例关系

缺点

• 嵌套时计算复杂，容易出错
• 依赖于父元素的字体大小，可能导致不可预期的结果

相对单位 (rem)

特点

• 相对于根元素字体大小：1rem 等于根元素（html）的字体大小
• 统一参考点：所有元素的 rem 都参考同一个基准值
• 易于计算：避免了 em 的嵌套问题

优点

• 响应式，会随根元素字体大小变化
• 计算简单，避免了 em 的嵌套问题
• 适合构建响应式布局

缺点

• 老版本浏览器（IE8及以下）不支持
• 需要设置根元素字体大小作为基准

视口单位 (vw/vh)

特点

• 相对于视口大小：1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%
• 响应式：会随视口大小变化而自动调整
• 独立于字体大小：不受元素字体大小影响

优点

• 完全响应式，直接与视口大小关联
• 适合构建全屏布局和自适应界面
• 计算简单，无需考虑父元素或根元素

缺点

• 老版本浏览器支持有限
• 在移动设备上可能存在精度问题
• 可能导致元素大小在不同设备上差异较大

适用场景对比

单位	适用场景	不适用场景
px	边框、阴影、图标等需要精确尺寸的元素	响应式布局
em	按钮、表单元素等需要相对父元素大小的元素	多层嵌套的复杂布局
rem	整体布局、字体大小等需要统一参考的元素	老版本浏览器
vw/vh	全屏布局、响应式容器等需要随视口变化的元素	老版本浏览器、需要精确尺寸的元素

最佳实践

1. 混合使用：根据不同场景选择合适的单位
2. 基准设置：设置合理的根元素字体大小（如 16px）
3. 媒体查询：结合媒体查询调整不同屏幕尺寸下的布局
4. 兼容性：为老版本浏览器提供降级方案