移动端适配动态指定rem

 util中新建工具类

/**
 * 动态指定rem基准值，最大为40px
 * 根据用户的屏幕宽度，进行一些计算，把计算出来的值赋值给html标签作为fontsize大小
 */
export const useREM = () => {
    // 定义最大的 fontSize
    const MAX_FONT_SIZE = 40

    // 监听 html 文档被解析完成的事件
    document.addEventListener('DOMContentLoaded', () => {
        // 获取 html 标签
        const html = document.querySelector('html')
        // 获取根元素 fontSize 标准，屏幕宽度 / 10。（以 Iphone 为例 Iphone 6 屏幕宽度为 375，则标准 fontSize 为 37.5）
        let fontSize = window.innerWidth / 10
        // 获取到的 fontSize 不允许超过我们定义的最大值
        fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize
        // 定义根元素（html）fontSize 的大小 （rem）
        html.style.fontSize = fontSize + 'px'
    })
}

main.js中引入

import {useREM} from "@/utils/flexible";

useREM ()