在css3中，vh和vw是视口单位，是相对长度单位。

---

前言

提示：以下所有内容，仅为个人经验总结，非专业解释

在学习css时，除了px像素，我们还经常遇到vh和vw这两个单位，那这两个单位具体是什么呢，怎么使用呢？

---

一、视口单位（ Viewport units )

想了解vh和vw，首先我们需要知道什么是视口。顾名思义，视口即为可视窗口。
分两种情况：

1.在pc端

视口指：pc端中，浏览器的可视区域；

2.在移动端

移动端的视口分三种：Layout Viewport（布局视口）、 Visual Viewport（视觉视口）、Ideal Viewport（理想视口）；这三个视口的区别不多赘述，这里指的是Layout Viewport（布局视口）。

二、常见单位及使用

1.常见单位

常见视口单位主要包括以下4个：

• vw : 相对于视口的宽度，1vw 等于视口宽度的1%（总视口宽度为100vw）
• vh : 相对于视口的高度， 1vh 等于视口高度的1%（总视口高度为100vh）
• vmin : 选取 vw 和 vh 中最小的那个
• vmax : 选取 vw 和 vh 中最大的那个
  提示：横屏时要交换视口单位哦~

2.使用

一般情况下，如果我们仅使用px或rem、em时，会在窗口缩放时，有一些卡顿等小瑕疵影响体验，所以如果可以用rem和vw配合使用，就会使页面布局更为优化，改善使用体验感。