【vh代表什么】在网页设计和前端开发中，`vh` 是一个常用的单位，用于控制元素的高度。它代表“视口高度”（Viewport Height），是 CSS 中一种相对单位，常用于响应式布局中，确保元素在不同屏幕尺寸下保持合理的比例。
下面是对 `vh` 的详细总结：
一、什么是 vh？
`vh` 是 viewport height 的缩写，表示浏览器窗口的可视区域高度。1vh 等于视口高度的 1%。例如，如果浏览器窗口的高度是 800 像素，那么 1vh 就等于 8 像素。
二、与 px、em、rem 的区别
| 单位 | 说明 | 特点 |
| px | 像素单位 | 绝对单位，不随屏幕尺寸变化 |
| em | 相对于父元素字体大小 | 可继承，适合文字大小调整 |
| rem | 相对于根元素字体大小 | 与 em 类似，但不受父元素影响 |
| vh | 相对于视口高度 | 适用于全屏或大范围布局 |
三、vh 的使用场景
- 全屏背景图：设置背景图高度为 100vh，可使图片填满整个视口。
- 导航栏高度：通过设置导航栏高度为 10vh，使其在不同设备上保持一致的比例。
- 响应式布局：结合媒体查询，利用 vh 实现更灵活的布局适应性。
四、示例代码
```css
body {
margin: 0;
}
.full-screen {
height: 100vh;
background-color: lightblue;
display: flex;
align-items: center;
justify-content: center;
font-size: 2vw; / 使用 vw 作为字体大小 /
}
```
在这个例子中，`.full-screen` 元素的高度始终等于视口的高度，无论用户如何调整浏览器窗口。
五、注意事项
- `vh` 不受滚动条的影响，只计算当前可见区域的高度。
- 在移动端，由于状态栏的存在，实际可用高度可能小于视口高度。
- 使用 `vh` 时应考虑兼容性，尤其是在旧版浏览器中。
六、总结
| 项目 | 内容 |
| 定义 | 视口高度的 1% |
| 用途 | 控制元素高度，适配不同屏幕 |
| 优点 | 灵活、响应式强 |
| 缺点 | 不适用于小尺寸元素，需注意兼容性 |
通过合理使用 `vh`，开发者可以更轻松地实现跨设备、自适应的网页布局，提升用户体验。