在移动端适配和响应式开发中，选择合适的 CSS 单位如同选择趁手的工具。本文将深入剖析最常用的四个动态单位，通过对比演示帮你彻底掌握它们的特性！

一、相对单位双雄：em vs rem #

1. em - 继承缩放单位 # 

<div class="parent">
  父元素字体16px
  <div class="child">子元素1.2em → 19.2px</div>
  <div class="grandchild">孙元素1.2em → 23.04px（继承父元素的19.2px）</div>
</div>

特性分析：

  • 基准值来自最近的父级字体大小
  • 嵌套使用时会产生"利滚利"的叠加效果
  • 适合按钮等需要相对父级缩放的组件

2. rem - 根基准单位 # 

html {
  font-size: 16px;
}

.element {
  font-size: 1.5rem; /* 始终等于24px */
}

核心优势：

  • 始终基于<html>元素的字体大小
  • 避免多级嵌套导致的尺寸失控
  • 响应式开发的首选单位（配合媒体查询调整根字体）

二、视口单位双璧：vh vs vw #

1. vh - 视口高度单位 # 

.header {
  height: 10vh; /* 视口高度的10% */
}
.modal {
  height: 100vh; /* 全屏效果 */
}

经典场景：

  • 全屏轮播图
  • 垂直居中布局
  • 移动端导航栏

2. vw - 视口宽度单位 # 

.container {
  width: 80vw; /* 视口宽度的80% */
}
.text {
  font-size: calc(1rem + 0.5vw); /* 流体排版 */
}

对比实验：

<div class="parent" style="width: 500px;">
  <div class="child-percent" style="width: 50%;"></div>
  <!-- 250px -->
  <div class="child-vw" style="width: 50vw;"></div>
  <!-- 视口宽度50% -->
</div>

当视口宽度>500px 时，50vw > 50%

三、单位特性对比表 #

单位 基准对象 响应式 继承影响 典型应用场景
em 当前元素字体 ✔️ 受影响 按钮组件、文本缩进
rem 根元素字体 ✔️ 无影响 全局布局、响应式排版
vh 视口高度 ✔️ 无影响 全屏区块、垂直居中
vw 视口宽度 ✔️ 无影响 流体布局、横屏适配
% 父元素对应属性 ❌ 受影响 传统流式布局

四、实战避坑指南 #

vh 移动端适配问题：

/* 修复iOS地址栏问题 */
.fullscreen {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

rem 基准值设置技巧：

html {
  font-size: calc(100vw / 19.2); /* 1920设计稿基准 */
}

复合单位的最佳实践：

.responsive-box {
  width: min(90vw, 1200px);
  padding: 2rem;
  margin: 5vh auto;
}