Rem实现自适应布局

佚名 6年前 (2019-04-09) 随笔 1802人围观抢沙发百度已收录

rem布局的目的是为了让我们可以用同一份代码,适应不同的移动终端（rem：就是css单位）

1、项目入口html文件<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

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);