移动端rem适配方案

// 动态设置html的字体的大小

const MAX_FONT_SIZE = 42;

//监听 html 文档被解析完成的事件

document.addEventListener("DOMContentLoaded", () => {

    // 获取html的标签

    const html = document.querySelector('html');

    //获取设备的根原生的fontsize的大小，屏幕宽度/10

    let fontSize = window.innerWidth / 10;

    //获取到的fontSize 不能超过最大值

    fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize;

    // 定义根元素的html的大小 (rem)

    html.style.fontSize = fontSize+'px';

})

定义px2rem:

// 定义预计根元素 fontSize 适用于 苹果6 6s 7 8

$rootFontSize : 375 / 10;

//定义 将像素转rem的函数

@function px2rem ($px) {

    @return $px / $rootFontSize + rem ;

}