手机端-自适应解决方案02 rem

ROOT_VALUE 很关键（我们设置 html 根目录的大小）

通常UI设计图 画布像素大小 为750px

const ROOT_VALUE = 100 //TODO
const WIDTH_RATIO = ROOT_VALUE / 750
const doc = window.document
const docEl = doc.documentElement
let rem

// 根据当前屏幕计算rem
export const refreshRem = () => {
    // 计算视口缩放
    const dpr = window.devicePixelRatio || 1
    const scale = 1 / dpr
    let metaEl = document.querySelector('meta[name="viewport"]')
    if (!metaEl) {
        metaEl = document.createElement('meta')
        metaEl.setAttribute('name', 'viewport')
        window.document.head.appendChild(metaEl)
    }
    //metaEl.setAttribute('content', 'width=device-width,user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale)

    const vW = docEl.getBoundingClientRect().width
    const vH = docEl.getBoundingClientRect().heigh
    rem = vW * WIDTH_RATIO
    docEl.style.fontSize = rem + 'px'
}