CSS 视口单位说明

在新的 CSS 单位中，有很多单位是专门为移动端设备进行使用的，例如 vh、vw、vmax 等单位，这篇文章主要是介绍 24 个常用的移动端设备单位。

vh 和 vw 单位

vh 和 vw 都是表示元素占用屏幕的百分之几，例如声明元素占屏幕宽度的 50%：

body {
  height: 150vh;
}

.container {
  display: flex;
  gap: 1rem;
}

.box1 {
  background-color: lightgreen;
  width: 50vw; /* 50vw 相当于声明元素占屏幕宽度的50% */
  height: 50vw; /* 50vw 相当于声明元素占屏幕宽度的50% */
}

说明：
1、vh 是相对于屏幕的高度，vw 是相对于屏幕的宽度，来设置元素的宽高的，这里需要注意。

2、假如元素的宽高的单位为 vh 和 vw 的话，屏幕的实际宽高都发生改变的时候，元素的宽高也会随之发生改变。

3、vh 和 vw 只跟屏幕的实际宽高有关系跟父级元素无关，即父级声明了宽高的情况下，子元素的宽高单位为 vh 和 vw 的话，他们的实际高度还是按照屏幕的宽高来进行计算。

4、假如父级容器的 display 属性值为 flex 的话，元素的宽度设置为 vh 的话，元素的实际宽度可能会跟实际值不一样，例如上面的例子中，我们把 vw 改为 vh 的话，box1 的实际宽度会有所变动，例如如下的图片

vmax 和 vmin 单位

vmax 和 vmin 两个单位与 vm 和 vh 类似，都是表示元素占用屏幕的百分之几。而 vmax 和 vmin 只是在设置元素的宽高之前会先对比屏幕的高度，最在赋值给具体的元素。即为元素的宽度设置为 vmax 的话，元素的具体宽度就就会判断当前设备屏幕的宽高值，假如屏幕的高度大于宽度的话，则最后为元素赋值的就是屏幕的高度值。实例如下：

.box1 {
  background-color: lightgreen;
  width: 50vmax; /* 为元素的宽度设置为屏幕宽高中最大值的百分之50% */
  height: 50vmin; /* 为元素的宽度设置为屏幕宽高中最小值的百分之50% */
}

vi 和 vb 单位

vi 和 vb 表示的是视口内联和视口块的单元。默认情况下 vi(宽度)和 vb(高度) 的赋值行为与 vh 和 vw 一致。具体实例如下：

.box1 {
  background-color: lightgreen;
  width: 50vi;
  height: 50vb;
}

当我们为元素添加 writing-mode 属性后，元素的书写方式就会发生改变，这样 vi 和 vw 的表示就会发生改变，具体实例如下：

.box1 {
  writing-mode: vertical-lr;
  background-color: lightgreen;
  width: 50vi;
  height: 50vb;
}

剩余的 18 个视口单位

s[vh / vw / vmax / vmin / vi / vb]: 小视口高度

l[vh / vw / vmax / vmin / vi / vb]：大视口高度，会忽略移动设备中的地址栏部分的高度，呈现与 vh 一样的效果

d[vh / vw / vmax / vmin / vi / vb]：动态视口高度，动态视口的高度取值主要是在 svh 和 lcvh 之间来回取值，当移动端设备地址栏消失后，元素的实际高度就是 lvh 的高度。假如希望网站完美的来适配高度的话，可以使用 dvh 来进行设置。