移动端rem适配，以及要注意的问题

移动端配置代码

html 中的代码

<meta name='viewport' content='width=device-width, user-scale=no, maximum-scale=1, minimum-scale=1, viewport-fit=cover, initial-scale=1' />

js中配置代码

function rem () {
//获取设备宽度,vue的html 中一定要加分号，eslint-disable
var deviceWith = Math.min(document.documentElement.getBoundingClientRect().width, 500);

//根据设备宽度进行当前rem基准值的计算
var currentValue = deviceWith * 100  /  750 + 'px';
//750是设计稿的宽度
//100是预设rem基准值，方便计算设为100px

//改变html的font-size
document.querySelector('html')[0].style.fontSize = currentValue;
}

rem();
//onresize是监听设备宽度和div宽度的变化事件
window.onresize = function () {
   rem();
}

SCSS中的代码配置（rem.scss）

@function rem ($px) {
    @return $px / 100 + rem
};

使用方法

font-size: rem(30);