vue3+ts+vite3（1920 * 1080） px转换rem

一、需要下载这两个依赖

 npm install amfe-flexible@2.2.1 -D
 npm install postcss-pxtorem@6.0.0 -D    /    npm install postcss-pxtorem@5.1.1 -D

二、在vite.config.ts中

引入  import postCssPxToRem from "postcss-pxtorem"; 

并写

css: {
        // 此代码为适配移动端px2rem
        postcss: {
            plugins: [
                postCssPxToRem({
                    rootValue: 37.5, // 1rem的大小（控制1rem的大小  点位：px）
                    propList: ["*"], // 需要转换的属性，这里选择全部都进行转换
                }),
            ],
        },
    },

 

三、main.ts中写入

// rem
import "amfe-flexible";

// rem
const baseSize = 38;

// 设置 rem 函数
function setRem() {
    // 当前页面宽度缩放比例，可根据自己需要修改
    const scale = document.documentElement.clientWidth / 1920;
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize =
        baseSize * Math.min(scale, 2) + "px";
}

// 初始化 rem
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem();
};