vw / vh

相对单位

vw：viewport width

1vw = 1 / 100 视口宽度

vh：viewport height

1vh = 1 / 100 视口高度

.box {
    width:50vw;
    height:50vh;
}

注：开发中常用vw去适配

vw/vh是永远参考着可视窗口进行变化

vw适配没有最大宽度，最小宽度值限制，因为它是参考着浏览器可视窗口进行缩放

计算公式

大前提：设计稿是375px的。

1vw = 1%的视口宽度
1vw = 3.75px
?vw * 3.75 = 68px
?vw = 68 / 3.75

要写的vw值 = 测量出的尺寸 / 设计稿宽度的1%

1vh = 1%的视口高度 设计稿是以iphone6为基准的 宽度 375 高度 667

1vh = 6.67px
?vh * 6.67 = 68
?vh = 68 / 6.67