前端面试题：rem、em、vw、vh 与百分比的区别

2025-02-06 270 阅读4分钟

在前端开发中，布局和样式的精确控制是实现优秀用户体验的关键。CSS 中提供了多种单位来定义元素的尺寸和间距，其中 rem、em、vw、vh 和百分比是常用的几种。它们各有特点和适用场景，理解它们的区别对于前端开发者来说至关重要。

1. `rem`（Root em）

定义：rem 是基于根元素（html 元素）的字体大小进行缩放的单位。无论页面中的嵌套层次有多深，rem 的值始终相对于根元素的字体大小。
特点：
- 全局一致性：由于 rem 始终基于根元素的字体大小，因此在页面中使用 rem 可以保持一致的缩放比例，非常适合用于全局布局和组件的尺寸定义。
- 易于维护：只需调整根元素的字体大小，即可实现全局样式的缩放，便于响应式设计。
适用场景：
- 全局布局：如页面的宽度、高度、间距等。
- 响应式设计：通过动态调整根元素的字体大小，实现不同屏幕尺寸下的适配。

2. `em`（Ems）

定义：em 是基于当前元素的字体大小进行缩放的单位。如果当前元素没有明确设置字体大小，则会继承父元素的字体大小。
特点：
- 相对性：em 的值是相对于当前元素的字体大小，因此在嵌套结构中，em 的值会随着父元素的变化而变化。
- 灵活性：在需要根据当前元素的字体大小进行缩放时，em 非常灵活。
适用场景：
- 字体大小：常用于字体大小的定义，特别是需要根据父元素字体大小调整时。
- 局部布局：在局部组件中，使用 em 可以实现更灵活的尺寸控制。

3. `vw`（Viewport Width）

定义：vw 是基于视口宽度的百分比单位，1vw 等于视口宽度的 1%。
特点：
- 视口相关：vw 的值始终与视口宽度相关，不受页面内容的影响。
- 响应式设计：非常适合用于响应式布局，特别是在需要根据屏幕宽度动态调整元素尺寸时。
适用场景：
- 全屏布局：如全屏背景图、全屏导航栏等。
- 响应式组件：如宽度需要根据屏幕宽度动态调整的容器。

4. `vh`（Viewport Height）

定义：vh 是基于视口高度的百分比单位，1vh 等于视口高度的 1%。
特点：
- 视口相关：与视口高度相关，不受页面内容的影响。
- 高度控制：在需要根据视口高度动态调整元素高度时非常有用。
适用场景：
- 全屏布局：如全屏的模态框、全屏的广告条等。
- 高度适配：在需要根据屏幕高度动态调整元素高度时。

5. 百分比（%）

定义：百分比是基于父元素的尺寸进行计算的单位。例如，宽度的百分比基于父元素的宽度，高度的百分比基于父元素的高度。
特点：
- 相对性：百分比的值是相对于父元素的尺寸，因此在嵌套结构中，百分比的值会随着父元素的变化而变化。
- 灵活性：非常适合用于需要根据父元素尺寸动态调整的场景。
适用场景：
- 弹性布局：如使用百分比实现弹性容器的宽度和高度。
- 局部适配：在局部组件中，根据父元素的尺寸动态调整子元素的尺寸。

总结

rem：全局一致性，适合全局布局和响应式设计。
em：相对当前元素字体大小，适合字体大小和局部布局。
vw：基于视口宽度，适合全屏布局和响应式组件。
vh：基于视口高度，适合全屏布局和高度适配。
百分比：基于父元素尺寸，适合弹性布局和局部适配。

在实际开发中，选择合适的单位需要根据具体的布局需求和设计目标来决定。理解它们的区别和适用场景，可以帮助开发者更高效地实现页面布局和样式控制。