CSS单位详解：rem、em、vw、vh

CSS单位详解

rem、em、vw、vh的区别与应用场景

1920 × 1080

单位特性对比

提示：调整浏览器窗口大小或使用下方控制面板，观察各单位的响应变化

rem 单位 (15rem = 15 × 根字体大小)

em 单位 (15em = 15 × 当前字体大小)

vw 单位 (30vw = 30% 视口宽度)

vh 单位 (15vh = 15% 视口高度)

根字体大小 (px):

元素字体大小 (px):

使用rem设置字体大小和间距，确保整个设计比例一致。只需更改根字体大小即可全局调整比例。

html { font-size: 16px; }
h1 { font-size: 2.5rem; } /* 40px */
p { margin-bottom: 1.5rem; } /* 24px */

创建全屏区域、保持宽高比或设置与视口相关的尺寸，如图片轮播、英雄区域等。

.hero-section {
  width: 100vw;
  height: 100vh;
}
.banner {
  font-size: 5vw; /* 响应式字体 */
}

在组件内部使用em设置内边距、外边距等，使间距与组件字体大小成比例变化。

.card {
  font-size: 18px;
  padding: 1.5em; /* 27px */
}
.card-title {
  margin-bottom: 0.8em; /* 基于自身字体大小 */
}