📋 核心概念对比

表格

单位 全称 相对基准 计算方式 适用场景
vw Viewport Width 视口宽度 1vw = 视口宽度的1% 响应式宽度、全屏布局
vh Viewport Height 视口高度 1vh = 视口高度的1% 全屏高度、视口相关布局
em em 父元素字体大小 1em = 父元素font-size 组件内部间距、字体缩放
rem Root em 根元素(html)字体大小 1rem = html的font-size 全局统一尺度、响应式字体

🔍 详细解析

1️⃣ vw / vh - 视口单位

css

编辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1/* 视口宽度单位 */
2.full-width {
3  width: 100vw;  /* 占满整个视口宽度 */
4}
5
6/* 视口高度单位 */
7.full-height {
8  height: 100vh;  /* 占满整个视口高度 */
9}
10
11/* 组合使用 */
12.hero-section {
13  width: 100vw;
14  height: 100vh;  /* 全屏英雄区域 */
15}
16
17/* 响应式字体 */
18.responsive-text {
19  font-size: 4vw;  /* 字体随视口宽度变化 */
20}

特点：

  • ✅ 完美适配各种屏幕尺寸
  • ✅ 无需媒体查询即可响应式
  • ⚠️ 移动端需注意浏览器地址栏影响
  • ⚠️ 过小值可能导致文字难以阅读

2️⃣ em - 父元素相对单位

css

编辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1/* 基础示例 */
2.parent {
3  font-size: 16px;
4}
5
6.child {
7  font-size: 1.5em;  /* 16px × 1.5 = 24px */
8  padding: 0.5em;    /* 24px × 0.5 = 12px */
9}
10
11/* 嵌套时会累积 */
12.level1 {
13  font-size: 16px;
14}
15.level2 {
16  font-size: 1.5em;  /* 16 × 1.5 = 24px */
17}
18.level3 {
19  font-size: 1.5em;  /* 24 × 1.5 = 36px (累积!) */
20}

特点：

  • ✅ 适合组件内部相对缩放
  • ✅ 继承性强，便于整体调整
  • ⚠️ 嵌套时会累积计算，可能失控
  • ⚠️ 需要仔细计算层级关系

3️⃣ rem - 根元素相对单位

css

编辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1/* 设置根元素字体 */
2html {
3  font-size: 16px;  /* 基准值 */
4}
5
6/* 全局统一使用rem */
7body {
8  font-size: 1rem;    /* 16px */
9  padding: 1rem;      /* 16px */
10}
11
12.card {
13  font-size: 0.875rem;  /* 14px */
14  padding: 1.5rem;      /* 24px */
15  margin: 2rem;         /* 32px */
16}
17
18/* 响应式方案：媒体查询调整根字体 */
19@media (max-width: 768px) {
20  html {
21    font-size: 14px;
22  }
23}

特点：

  • ✅ 不会累积，始终相对于根元素
  • ✅ 便于全局统一控制
  • ✅ 配合媒体查询实现响应式
  • ✅ 无障碍友好，支持用户浏览器设置

📊 决策指南表

表格

场景 推荐单位 理由
全屏布局 vw/vh 直接基于视口尺寸
响应式字体 rem + 媒体查询 全局可控，无障碍友好
组件内部间距 em 随组件字体自动缩放
按钮/卡片尺寸 rem 统一尺度，易于维护
容器最大宽度 rem 或 % 配合max-width使用
精确像素需求 px 边框、阴影等细节

💡 2026年最佳实践

🟢 推荐组合方案

css

编辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1/* 现代响应式方案 */
2html {
3  font-size: 16px;  /* 基准 */
4}
5
6/* 使用rem作为主要单位 */
7body {
8  font-size: 1rem;
9  line-height: 1.5;
10}
11
12.container {
13  max-width: 75rem;  /* 1200px */
14  padding: 2rem;
15}
16
17/* 视口单位用于特殊场景 */
18.hero {
19  min-height: 100vh;
20}
21
22.full-width-section {
23  width: 100vw;
24  margin-left: calc(-50vw + 50%);  /* 突破容器限制 */
25}
26
27/* em用于组件内部 */
28.button {
29  font-size: 1rem;
30  padding: 0.75em 1.5em;  /* 随字体缩放 */
31}

📱 移动端适配技巧

css

编辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1/* 方案1：rem + 媒体查询 */
2@media (max-width: 768px) {
3  html { font-size: 14px; }
4}
5
6/* 方案2：vw动态字体（有最小值限制） */
7h1 {
8  font-size: clamp(1.5rem, 5vw, 3rem);
9}
10
11/* 方案3：混合使用 */
12.responsive-box {
13  width: 90vw;
14  max-width: 1200px;
15  font-size: 1rem;
16}

⚠️ 常见陷阱

表格

问题 说明 解决方案
em嵌套累积 多层嵌套导致字体过大 优先使用rem
vw字体过小 小屏幕上文字难以阅读 使用clamp()设置最小值
移动端vh问题 地址栏影响实际高度 使用dvh/svh新单位
rem需要基准 依赖html字体设置 统一设置根元素font-size

📝 总结对比

text

编辑

1
2
3
4
5
6
7
8
1┌─────────────────────────────────────────────────────────┐
2│                    单位选择优先级                        │
3├─────────────────────────────────────────────────────────┤
4│  全局布局/间距  →  rem (首选)                            │
5│  视口相关尺寸   →  vw/vh                                │
6│  组件内部相对   →  em                                   │
7│  精确像素需求   →  px (边框、阴影等)                      │
8└─────────────────────────────────────────────────────────┘

2026年推荐：

  • 🏆 rem 作为主要单位（全局可控、无障碍友好）
  • 🏆 vw/vh 用于视口相关布局
  • 🏆 em 用于组件内部相对缩放
  • 🏆 配合 clamp() 函数实现更智能的响应式