rem计算方式 手写rem vue引入rem

vue引入rem适配时，大多数人都是下载插件，这里分享一下单独建一个ts（js也可以)文件，自己计算rem。
在项目中新建rem.ts文件

(function (): void {
    const docWidth = 1920;
    const doc: Document = window.document,
        docEl: HTMLElement = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    const recalc = (function refreshRem() {
        const clientWidth = docEl.getBoundingClientRect().width;
        docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 44.2), 8.55) * 5 + 'px';
        return refreshRem;
    })();

    if (!doc.addEventListener) {
        return;
    }

    window.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false)
}

)()

在main.ts引入

import './config/rem.ts'

查看效果： 1920px = 19.2rem;

<template>
    <div class="loginSty">
        
    </div>
</template>

<style>
    .loginSty{
        width: 19.2rem;
        height: 100vh;
        background-color: seagreen;
       /* background: url('@/assets/img/loginBg.png') 100% / cover no-repeat; */
    }
</style>