px自动转rem

1、在方法创建一个rem.js 然后再main.js 引用

在项目中css 写会自动转成rem ，（行内样式不会生效）

// 引入vuex为F11全屏后左边按钮样式做判断;
import store from "../store/index.js"

// 设置 rem 函数
function setRem() {
    //  PC端
    console.log("非移动设备");
    // 基准大小
    let baseSize = 100;
    let baseHeight = 1080;
    let baseWidth = 1920;
    let basePc = baseSize / baseWidth; // 表示1920的设计图,使用100PX的默认值
    let vW = window.innerWidth; // 当前窗口的宽度
    let vH = window.innerHeight; // 当前窗口的高度

    // // 非正常屏幕下的尺寸换算
    let dueH = (vW * baseHeight) / baseWidth;

    if (vH < dueH) {
        // 当前屏幕高度小于应有的屏幕高度，就需要根据当前屏幕高度重新计算屏幕宽度
        vW = (vH * baseWidth) / baseHeight;
    }
    let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
    document.documentElement.style.fontSize = rem + "px";

    // 给vuex的getHeight设置属性;
    if(vH > 930 && vH < 1000){
        // 非全屏;
        store.state.getHeight = "small";
    }else if(vH > 1000 && vH < 1100){
        // 全屏;
        store.state.getHeight = "big";
    }
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem();
};

export default setRem

2 、在main 引用

import "./utils/rem.js";

px自动转rem

悦读