# 视口单位

URL: https://caijiao.org/css/10-responsive/01-viewport-units
Source: docs/css/10-responsive/01-viewport-units.md
Description: CSS 视口单位是相对于浏览器可视区域的单位，用于实现响应式设计，如 vw、vh、vmin、vmax 等。

视口单位是一种基于浏览器窗口大小的相对单位，常用于实现响应式布局和自适应排版。

## 1. 常见视口单位

| 单位   | 含义                              |
| ------ | --------------------------------- |
| `vw`   | 相对于视口宽度（1vw = 1% 的宽度） |
| `vh`   | 相对于视口高度（1vh = 1% 的高度） |
| `vmin` | 视口宽度和高度中较小的那一个      |
| `vmax` | 视口宽度和高度中较大的那一个      |

## 2. 使用场景

- 页面横幅、全屏布局等
- 字体、间距自适应视口变化
- 移动端适配

## 示例

```css
.banner {
  height: 100vh;
  width: 100vw;
  background: linear-gradient(to right, #2196f3, #21cbf3);
}
```

上述代码将 `.banner` 设置为全屏大小，随窗口变化自适应。

## 视口单位示例

[在线代码演示](/css/demos/27.html)