移动端rem的动态配置（vue框架下的配置）

动态配置rem，可以使不同屏幕尺寸下的图片、文字等尺寸按比例缩小或放大，相比媒体查询的方式，更加灵活便捷。

步骤一：

新建一个js文件（路径无要求），用于编写动态配置rem的函数

步骤二：

首先对

//该代码本质是对类似window.addEventListener（"orientationchange"，function（）{
    alert("the orientation fo the device is now " + screen.orientation.angle）;
}）;进行的动态封装

(function(doc, win) {
	var docEl = doc.documentElement,
        //如果当前浏览器支持orientationchange，则使用orientationchange来调整屏幕尺寸，否则使用resize来调整
		resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		recalc = function() {
			var clientWidth = docEl.clientWidth;
			if(!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 375) + 'px'; //根据屏幕的宽度进行等比例调整
		};
 
	if(!doc.addEventListener) return; //如果不支持监听则终止函数
	win.addEventListener(resizeEvt, recalc, false);  //第一个参数是事件的类型 (如 "click" 或 "mousedown").第二个参数是事件触发后调用的函数。第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。true - 事件句柄在捕获阶段执行。false- 默认。事件句柄在冒泡阶段执行
	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

步骤三：在main.js中引入该文件

import '../config/remConfig'