rem布局的目的是为了让我们可以用同一份代码,适应不同的移动终端(rem:就是css单位)
1、项目入口html文件<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
2、在项目util文件夹下创建rem.js文件
3、再在main.js 文件import './utils/rem'
rem.js代码如下://以iPhone6尺寸为基准
1 (function (doc, win) { 2 var docEl = doc.documentElement, 3 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 4 recalc = function () { 5 var clientWidth = docEl.clientWidth; 6 if (!clientWidth) return; 7 if (clientWidth >= 375) { 8 docEl.style.fontSize = '100px'; 9 } else { 10 docEl.style.fontSize = 100 * (clientWidth / 375) + 'px'; 11 } 12 }; 13 14 if (!doc.addEventListener) return; 15 win.addEventListener(resizeEvt, recalc, false); 16 doc.addEventListener('DOMContentLoaded', recalc, false); 17 })(document, window);