一.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单位,只使用其中一个,因为有可能设备是全面屏高度不同导致适配效果不好