H5页面移动设备兼容处理最简单的vw+rem

在做移动端开发时，想到各种品牌，各种尺寸，各种DPR的设备，真是让人头大。。。
H5页面兼容种类繁多的移动设备，一直是个头大的问题。

后来，手淘的lib-flexible的出现解决了当时多尺寸设备的兼容问题。flexable是根据设备的DPR设置不同的rem来进行适配。但是随着vw单位的普及，如果再有人让你引入flexable（毕竟手淘都已经废弃该方案了）⬇️

vw+rem方案：

首先一定不要忘了设置视口

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

接着在css文件中设置跟字号

html{
	font-size: 13.333333vw; // 针对宽度为750px的设计稿
}

设置后需要用到px单位的地方用rem代替 ，大小是px大小除以100。
例如：设计稿上宽度是300px 则写css的时候写 :

/* width:300px; */
width: 3rem;  

原理解析：

移动设备的屏幕宽度固定为-- 100vw,
假定设计稿尺寸------------------------750px

为了让单位好换算，先假设 1rem = 100px， 这样设计稿中用到px的地方都可以用rem替换，换算也很简单，只需要除以100。

1rem = 100px = （100/7.5）vw = 13.3333333vw

所有设置html根字体font-size为13.333333vw就行了。

如果收到的是其他尺寸的设计稿 只用设置跟字号为100/(设计稿宽度/100)vw。