vw和vh：CSS中的视口相对单位

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- 引言
- vw和vh单位的特点
- - [1. 视口相对性](#1. 视口相对性)
  - [2. 动态调整](#2. 动态调整)
  - [3. 适用于响应式布局](#3. 适用于响应式布局)
- vw和vh单位的使用
- - [1. 设置元素尺寸](#1. 设置元素尺寸)
  - [2. 结合媒体查询](#2. 结合媒体查询)
  - [3. 注意兼容性](#3. 注意兼容性)
- 结论

引言

vw（viewport width）和vh（viewport height）是CSS中的相对长度单位，分别表示视口宽度和视口高度的百分比。这些单位使得元素的尺寸可以根据浏览器窗口的大小动态调整，从而实现更加灵活的响应式设计。

vw和vh单位的特点

1. 视口相对性

vw和vh单位是相对于浏览器视口的宽度和高度来计算的，其中1vw等于视口宽度的1%，1vh等于视口高度的1%。

2. 动态调整

使用vw和vh单位可以让元素的尺寸随着浏览器窗口大小的变化而自动调整，无需手动设置媒体查询。

3. 适用于响应式布局

vw和vh单位非常适合用于创建响应式布局，可以轻松实现元素在不同屏幕尺寸下的自适应。

vw和vh单位的使用

1. 设置元素尺寸

在CSS中使用vw和vh单位来定义元素的宽度、高度等尺寸。

css 复制代码

.header {
    width: 100vw; /* 元素宽度等于视口宽度 */
    height: 10vh; /* 元素高度等于视口高度的10% */
}

.content {
    width: 80vw; /* 元素宽度等于视口宽度的80% */
    height: 50vh; /* 元素高度等于视口高度的50% */
}

2. 结合媒体查询

虽然vw和vh单位可以自动调整元素尺寸，但在某些情况下，结合媒体查询可以实现更精细的控制。

css 复制代码

@media (max-width: 600px) {
    .header {
        height: 15vh; /* 在小屏幕上增加头部高度 */
    }
}

3. 注意兼容性

虽然vw和vh单位在现代浏览器中得到了广泛支持，但在一些旧版本的浏览器中可能存在兼容性问题。在使用时需要注意检查目标浏览器的兼容性。

结论

vw和vh单位是实现响应式设计的强大工具，它们允许元素的尺寸根据浏览器窗口的大小动态调整，从而创建更加灵活和自适应的布局。通过使用这些单位，开发者可以确保页面元素在不同设备和屏幕尺寸上都能保持良好的显示效果。