动态配置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'