CSS 单位完全指南：掌握 em、rem、vh、vw 等响应式布局核心单位

[一、绝对单位 vs 相对单位](#一、绝对单位 vs 相对单位)

二、核心相对单位详解

[1. em 单位](#1. em 单位)

[2. rem 单位（Root em）](#2. rem 单位（Root em）)

[3. vh 与 vw 单位](#3. vh 与 vw 单位)

[4. vmin 与 vmax 单位](#4. vmin 与 vmax 单位)

三、实战应用场景对比

五、专家建议与最佳实践

六、总结

一、绝对单位 vs 相对单位

绝对单位 （如px）固定不变，而相对单位则基于其他参考值动态计算，更适合响应式设计：

css 复制代码

/* 绝对单位示例 */
.fixed-size {
  width: 300px; /* 始终为300像素 */
}

/* 相对单位示例 */
.responsive-size {
  width: 50vw; /* 视口宽度的一半 */
}

二、核心相对单位详解

1. em 单位

计算方式 ：相对于当前元素的字体大小

特点：具有继承性，层级嵌套时会产生复合效果

css 复制代码

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em; /* 16px × 1.5 = 24px */
  padding: 2em;     /* 24px × 2 = 48px */
}

2. rem 单位（Root em）

计算方式 ：相对于**根元素(html)**的字体大小

特点：避免嵌套影响，更易控制全局比例

css 复制代码

html {
  font-size: 62.5%; /* 1rem = 10px (基于16px默认大小) */
}

.container {
  font-size: 1.6rem; /* 16px */
  margin: 2rem;      /* 20px */
}

3. vh 与 vw 单位

vh ：1% 的视口高度
vw ：1% 的视口宽度

特点：直接响应视口尺寸变化

css 复制代码

.hero-banner {
  height: 100vh;   /* 满屏高度 */
  width: 80vw;     /* 视口宽度的80% */
}

4. vmin 与 vmax 单位

vmin ：取 vh/vw 中的较小值

vmax ：取 vh/vw 中的较大值

css 复制代码

/* 在移动端横屏时特别有用 */
.responsive-square {
  width: 50vmin;  /* 总保持较小尺寸的50% */
  height: 50vmin; /* 形成完美正方形 */
}

三、实战应用场景对比

单位	适用场景	注意事项
rem	字体大小、间距	设置`html{font-size:62.5%}`简化计算
em	与特定文本相关的内边距/外边距	注意多层嵌套的复合效果
vw/vh	全屏布局、横幅	移动端100vh可能包含地址栏高度
%	基于父元素的尺寸	父元素必须有明确尺寸定义

四、响应式单位组合实战

css 复制代码

/* 响应式排版系统 */
html {
  font-size: 16px;
  
  /* 小屏幕调整 */
  @media (max-width: 768px) {
    font-size: 14px;
  }
}

h1 {
  font-size: calc(1.5rem + 2vw); /* 基础大小+视口自适应 */
}

/* 完美居中容器 */
.container {
  width: min(90vw, 1200px); /* 响应式宽度限制 */
  margin: 0 auto;
}

/* 移动端适配 */
@media (orientation: portrait) {
  .sidebar {
    height: 50vmax; /* 竖屏时使用较大尺寸 */
  }
}

五、专家建议与最佳实践

字体系统：优先使用rem为主、em为辅
布局系统：主框架使用vw/vh，内部元素用%
移动端适配 ：使用dvh（dynamic viewport height）解决地址栏问题
安全计算 ：结合min()、max()和clamp()函数
css 复制代码
```
/* 安全响应式文本 */
.title {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

/* 移动端高度修正 */
.mobile-section {
  height: 100dvh; /* 动态视口高度 */
}
```
关键提示：CSS4将引入新的容器查询单位（如cqw/cqh），可实现基于组件自身的响应式设计！

六、总结

掌握CSS相对单位是构建现代响应式网站的必备技能：

使用rem构建可预测的缩放系统
em适合局部相对控制
vw/vh创建视口相关布局
vmin/vmax处理复杂方向变化
组合使用并配合现代CSS函数实现精细控制