在css3中，vh和vw是视口单位，是相对长度单位。
文章目录
- 前言
- 一、视口单位（ Viewport units )
- 1.在pc端
- 2.在移动端
- 二、常见单位及使用
- 1.常见单位
- 2.使用
前言
提示：以下所有内容，仅为个人经验总结，非专业解释
在学习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配合使用，就会使页面布局更为优化，改善使用体验感。