假设设计稿尺寸为1920*1080（做之前一定问清楚ui设计稿的尺寸）

即：

网页宽度=1920px

网页高度=1080px

我们都知道

网页宽度=100vw

网页宽度=100vh

所以，在1920px*1080px的屏幕分辨率下

1920px=100vw

1080px=100vh

这样一来，以一个宽300px和200px的div来说，其所占的宽高，以vw和vh为单位，计算方式如下:

vwDiv=(300px/1920px)*100vw
vhDiv=(200px/1080px)*100vh

所以，就在1920*1080的屏幕分辨率下，计算出了单个div的宽高

当屏幕放大或者缩小时，div还是以vw和vh作为宽高的，就会自动适应不同分辨率的屏幕