vw和vh

一.vw和vh

vw和vh是跟rem一样是相对单位，但是相对比例不同。
使用rem单位需要媒体查询，也就是需要引入flexible.js文件，而使用vw或者vh则不需要，较为方便

1.vw

vw : viewport width
1vw = 1/100视口宽度

2.vh

vh : viewport height
1vh = 1/100视口高度

3.适配流程

vw单位尺寸：
确定设计稿对应的vw尺寸 (1/100视口宽度)
查看设计稿宽度——>确定参考设备宽度(视口宽度) ——>确定尺寸 (1/100 视口宽度)
vw单位的尺寸 = px单位数值 /(1/100 视口宽度)

比如375视口宽度的66px用vw单位：
66 / 3.75vw

4.全面屏影响

一般不混合使用vw和vh单位，只使用其中一个，因为有可能设备是全面屏高度不同导致适配效果不好