移动端vw、vh适配方案

前言

由于最近测试app的时候，发现 ios 于 Android 下的字体级布局大小不一致问题，初步认定为是分辨率不一样而导致的，然而经过各种百度，发现有 rem 于 vw、vh 两种适配方案，因为项目已经完成了一大部分，rem适配需要通过js计算来配合，比较繁琐，固然就选择了 vw、vh 适配方案，因为它不用通过js计算，直接使用即可

vw、vh工作原理

此单位是根据浏览器的视口尺寸的百分比来定义的

vw：（viewpoint width的缩写）视觉视口宽度，1vw等于视窗宽度的1%

vh：（viewpoint height的缩写）视觉视口高度，1vh等于视窗高度的1%

以iPhone6为例 觉视口为 375*667

宽度 1px  = (1/375*100) vw

高度 1px =  (1/667*100) vh

在此，推荐一个在线转换工具 https://www.cnblogs.com/zhaodesheng/p/13366072.html

兼容性

vw, vh：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome for android39支持

详情请见：https://caniuse.com/#feat=viewport-units