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

目录

一、绝对单位 vs 相对单位

二、核心相对单位详解

1. em 单位

2. rem 单位（Root em）

3. vh 与 vw 单位

4. vmin 与 vmax 单位

 三、实战应用场景对比

五、专家建议与最佳实践

六、总结

一、绝对单位 vs 相对单位

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

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

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

二、核心相对单位详解

1. em 单位

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

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

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

  2. rem 单位（Root em）

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

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

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

  3. vh 与 vw 单位

• vh：1% 的视口高度

• vw：1% 的视口宽度

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

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

  4. vmin 与 vmax 单位

• vmin：取 vh/vw 中的较小值

• vmax：取 vh/vw 中的较大值

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

   三、实战应用场景对比

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

四、响应式单位组合实战 

/* 响应式排版系统 */
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; /* 竖屏时使用较大尺寸 */
  }
}

五、专家建议与最佳实践

1. 字体系统：优先使用rem为主、em为辅

2. 布局系统：主框架使用vw/vh，内部元素用%

3. 移动端适配：使用dvh（dynamic viewport height）解决地址栏问题

4. 安全计算：结合min()、max()和clamp()函数

   /* 安全响应式文本 */
   .title {
     font-size: clamp(1.5rem, 4vw, 3rem);
   }
   
   /* 移动端高度修正 */
   .mobile-section {
     height: 100dvh; /* 动态视口高度 */
   }

   关键提示：CSS4将引入新的容器查询单位（如cqw/cqh），可实现基于组件自身的响应式设计！

六、总结

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

• 使用rem构建可预测的缩放系统

• em适合局部相对控制

• vw/vh创建视口相关布局

• vmin/vmax处理复杂方向变化

• 组合使用并配合现代CSS函数实现精细控制