根据设计稿的根元素的font-size-----自动计算不同尺寸屏幕移动端下的根元素的font-size：flexible.js

版权声明： https://blog.csdn.net/zgpeterliu/article/details/82257854

flexible.js文件

(function (doc, win) {
    const docEl = doc.documentElement
    const recalc = () => {
        let vw = docEl.clientWidth
        const vh = docEl.clientHeight
        const dpr = window.devicePixelRatio || 1
        // const meta = document.querySelector('meta[name="viewport"]')
        // const scale = 1 / dpr
        vw = (vw > 750 && 750) || (vw < 320 && 320) || vw
        // 基于750设计图，1rem = 100px
        docEl.style.fontSize = `${((vw / 750) * 100)}px`
        docEl.setAttribute('data-dpr', dpr)
        // meta.setAttribute('content', 'width=' + "device-width" + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no')// 设置data-dpr属性，留作的css hack之用
        window.vw = vw
        window.vh = vh
        // 当前版本号
        window.ft = '2018081801'
    }
    if (!doc.addEventListener) return
    const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
    win.addEventListener(resizeEvt, recalc, false)
    doc.addEventListener('DOMContentLoaded', recalc, false)
    recalc()
    const handleFontSize = () => {
        // 设置网页字体为默认大小
        window.WeixinJSBridge.invoke('setFontSizeCallback', {
            'fontSize': 0
        })
        // 重写设置网页字体大小的事件
        window.WeixinJSBridge.on('menu:setfont', () => {
            window.WeixinJSBridge.invoke('setFontSizeCallback', {
                'fontSize': 0
            })
        })
    }
    // 安卓，禁止用户缩放字号
    if (typeof window.WeixinJSBridge === 'object' && typeof window.WeixinJSBridge.invoke === 'function') handleFontSize()
    else if (document.addEventListener) document.addEventListener('WeixinJSBridgeReady', handleFontSize, false)
}(document, window))

index.js中引入js文件：

import '@/assets/scripts/common/vp.js'