在新的 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 来进行设置。