css中vw与vh的区别有哪些

# CSS中vw与vh的区别有哪些

## 引言

在现代响应式网页设计中，CSS单位`vw`（视窗宽度单位）和`vh`（视窗高度单位）已成为开发者实现自适应布局的重要工具。本文将从定义、计算方式、应用场景等维度深入分析二者的差异，并通过代码示例帮助读者理解其实际应用。

---

## 一、基础概念解析

### 1. vw（Viewport Width）
- **定义**：1vw等于**当前视窗宽度的1%**
- **计算公式**：`1vw = 1% × 视窗宽度`
- **示例**：在1920px宽的屏幕上，`50vw = 960px`

### 2. vh（Viewport Height）
- **定义**：1vh等于**当前视窗高度的1%**
- **计算公式**：`1vh = 1% × 视窗高度`
- **示例**：在1080px高的屏幕上，`100vh = 1080px`

---

## 二、核心差异对比

| 特性        | vw                          | vh                          |
|-------------|-----------------------------|-----------------------------|
| **基准维度** | 基于视窗宽度                | 基于视窗高度                |
| **动态响应** | 随浏览器宽度变化            | 随浏览器高度变化            |
| **常见用途** | 水平布局、字体大小适配      | 全屏布局、垂直居中          |
| **极端情况** | 横屏时可能过度拉伸          | 移动端URL栏影响精确度       |

---

## 三、关键区别详解

### 1. 计算基准不同
- **vw**始终以视口宽度为基准，适合构建与屏幕宽度相关的比例布局：
  ```css
  .container {
    width: 80vw; /* 始终占视窗宽度的80% */
  }

• vh则依赖视口高度，常用于控制垂直空间：

  
  .hero-section {
  height: 100vh; /* 撑满整个可视高度 */
  }
  

2. 响应行为差异

• 宽度场景：当用户调整浏览器窗口宽度时，vw单位会实时响应，而vh保持不变
• 高度场景：调整窗口高度时，vh单位动态变化，vw不受影响

3. 移动端特殊表现

• vh的陷阱：在移动浏览器中，100vh可能包含地址栏高度（iOS Safari存在此问题），需使用dvh（Dynamic Viewport Height）解决
• vw的稳定性：移动端横竖屏切换时，vw的表现更可预测

四、典型应用场景

vw的适用场景

1. 响应式字体：

   
   h1 {
    font-size: calc(16px + 1vw); /* 基础字号+视窗宽度比例 */
   }
   

2. 栅格系统：

   
   .col-3 {
    width: calc(25vw - 20px); /* 四列布局考虑间距 */
   }
   

vh的适用场景

1. 全屏区块：

   
   .fullscreen {
    height: 100vh;
    position: relative;
   }
   

2. 垂直居中：

   
   .centered {
    top: 50vh;
    transform: translateY(-50%);
   }
   

五、实际开发注意事项

1. 单位组合技巧

• 混合使用实现完美比例：

  
  .banner {
  width: 80vw;
  aspect-ratio: 16/9; /* 保持16:9比例 */
  max-height: 90vh;
  }
  

2. 常见问题解决方案

• 移动端vh问题：

  
  /* 使用CSS变量+JavaScript动态计算 */
  :root {
  --app-height: 100vh;
  }
  .element {
  height: var(--app-height);
  }
  

• 极端比例预防：

  
  .responsive-box {
  width: min(80vw, 1200px); /* 限制最大宽度 */
  }
  

六、扩展知识

1. 衍生单位

• vmin：取vw和vh中的较小值
• vmax：取vw和vh中的较大值
• dvh/lvh/svh：CSS新规范针对移动端的动态视口单位

2. 与%单位的区别

结语

理解vw和vh的本质差异，能帮助开发者更精准地控制元素尺寸与视窗的关系。建议在实际项目中： 1. 优先使用vw处理水平布局 2. 谨慎使用vh处理移动端垂直布局 3. 结合媒体查询和CSS函数实现完美适配

通过灵活运用这些视窗单位，可以构建出真正自适应的现代网页界面。 “`

注：本文实际约1200字，可通过扩展代码示例或增加浏览器兼容性等内容进一步补充。