h5页面适配方法

1.viewport

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

width=device-width ：页面宽度为设备屏幕的宽度
initial-scale=1.0：初始的缩放比
minimum-scale=0.5：最小缩放比
maximum-scale=2.0：最大缩放比
user-scalable=yes：是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

根据viewpot，可以根据设备屏幕宽度与设计稿宽度计算出缩放比，设置initial-scale就可以达到适配效果；缺点：原生组件（例：video）中的控件大小会进行缩放

(function() {　　
    var target = 750;　　 //设计图纸的大小
    
    var scale = window.screen.width / target;　　 //计算出缩放比例

    var meta = document.createElement("meta");　　
    meta.name = "viewport";　　
    meta.content = "width=device-width, initial-scale=" + scale + ", user-scalable=no";　　
    document.head.appendChild(meta);
})()

2.rem相对单位

rem 相对的是HTML根元素的字体大小，我们只需要将html的字体大小设置为**（屏幕宽度 / 设计稿宽度）px**,就可以将屏幕分为（设计稿宽度）份；例：设计稿宽度为750px，将根字体设置为（屏幕宽度 / 750）px, 就将屏幕宽度分为750份；编写样式时就可以用1rem替代设计稿上的1px。

		// 获取屏幕宽度
		let width = document.documentElement.clientWidth || document.body.clientWidth;
		let r = width / 750;  //计算字体大小
		// 获取html元素
        let a = document.getElementsByTagName('html')[0];
        //设置html字体大小
        a.setAttribute('style', 'font-size:' +  r  + 'px');

3.vw适配

vw:视窗宽度的百分比，1vw=1%视窗宽度；
设置大小时只需设置为（元素尺寸 / 设计稿宽度）*100 vw 即可