CSS中相对于viewport的长度单位

CSS中的长度单位分为两类，绝对单位和相对单位。绝对单位，比如像素px、厘米cm等；相对单位，比如em等。

而这里要说的是相对单位中的vw、vh、vmax、vmin这种单位。

长度单位 vw

相对于视窗viewport的宽度的1%而言，1vw就是等于浏览器视窗宽度的1%

1vw = 1% * 浏览器的窗口宽度

长度单位vh

相对于视窗viewport的高度的1%而言，1vh就是等于浏览器视窗高度的1%

1vh = 1% * 浏览器的窗口高度

长度单位 vmin

1vmin等于1vw和1vh两者之间的实际尺寸较小者

1vmin = min( 1vw, 1vh )

长度单位 vmax

1vmax等于1vw和1vh两者之间的实际尺寸较大者

1vmax = max( 1vw, 1vh )

这四种相对长度单位，更适合在自适应要求高的网页设计中使用，比如移动端网页。