vh和vw
时间: 2025-08-23 16:31:05 浏览: 5
### CSS 单位 `vh` 和 `vw` 的定义及用法
#### 定义
`vw` (Viewport Width) 表示视口宽度的百分比,其中 1`vw` 等于视口宽度的 1%[^1]。
`vh` (Viewport Height) 表示视口高度的百分比,其中 1`vh` 等于视口高度的 1%。
这些单位属于 CSS3 新增的视窗单位,能够动态调整元素尺寸以适配屏幕大小的变化,非常适合用于响应式设计[^4]。
---
#### 使用方法
通过设置元素的宽高属性为 `vw` 或 `vh` 值,可以实现基于视口比例的设计效果。例如:
- 设置某个元素的高度占视口高度的一半:`height: 50vh;`
- 设置某个元素的宽度等于视口宽度的四分之一:`width: 25vw;`
这种单位的优势在于其值会随着浏览器窗口大小变化而自动更新,无需额外媒体查询或脚本支持[^3]。
---
#### 示例代码
以下是一个简单的 HTML/CSS 示例,展示如何使用 `vw` 和 `vh` 来创建全屏背景以及居中的盒子:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vw/vh 示例</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh; /* 页面高度始终占据整个视口 */
background-color: #f0f0f0;
}
.box {
width: 80vw; /* 盒子宽度为视口宽度的80% */
height: 80vh; /* 盒子高度为视口高度的80% */
background-color: rgba(0, 128, 128, 0.7);
color: white;
text-align: center;
font-size: 3vw; /* 字体大小随视口宽度缩放 */
line-height: 80vh; /* 文字垂直居中 */
}
</style>
</head>
<body>
<div class="box">这是一个自适应的盒子</div>
</body>
</html>
```
在这个例子中:
- `.box` 的宽度和高度分别设为了视口宽度和高度的 80%,从而实现了完全自适应的效果。
- 字体大小被设定为 `3vw`,这意味着字体大小也会随着视口宽度的比例变化而改变[^2]。
---
#### 注意事项
虽然 `vw` 和 `vh` 提供了强大的灵活性,但在实际项目中需要注意一些潜在问题:
- 如果页面中有滚动条,则计算视口宽度时可能会受到滚动条的影响。
- 对于某些老旧设备或浏览器版本,可能不支持这些新单位,因此需要做好兼容性处理[^5]。
---
###
阅读全文
相关推荐



















