如何快速适配不同大小的屏幕 px转rem

px转rem的步骤

1. px转rem使用的插件是"postcss-pxtorem"，能帮助我们把px计算处理成rem，避免我们一个个的人工计算，提高效率。

import postCssPxToRem from "postcss-pxtorem";
//这是css配置
css: {
    postcss: {
        plugins: [
            postCssPxToRem({
                rootValue: 192, // 1rem的大小
                propList: ["*",'!border'], // 需要转换的属性，这里选择全部都进行转换
            }),
        ],
    },
},

rootValue: 192 意味着：如果fontSize是16px，则转换为rem为：16px/192=0.08333rem,css里面的所有长度单位px会使用这个规则，转换为rem。长度大小px = (长度大小/192)rem

2. 还需要添加js代码，根据屏幕大小，给html元素设置不同的字体大小fontsize，以用来适配不同大小的屏幕。

// 基准大小
const baseSize = 192;
// 设置 rem 函数
function getBodySize(path: any) {
    // 当前页面宽度相对于 1920或者1280 宽的缩放比例，可根据自己需要修改。
    // 设置页面根节点字体大小
    let baseWidth = 1920;
    const href = path || window.location.href;
    if (href.indexOf("horiscreen") > -1) {
        baseWidth = 1920;
    }
    if (href.indexOf("verscreen") > -1) {
        baseWidth = 1280;
    }
    const scale = document.documentElement.clientWidth / baseWidth;
    let fontSize = baseSize * Math.min(scale, 1);
    return fontSize;
}

function setRem(path: any) {
    let fontSize = getBodySize(path);
    console.log("setRem-fontSize", fontSize);
    document.documentElement.style.fontSize = `${fontSize}px`;
}
// 初始化 改变窗口大小时重新设置 rem
window.onresize = () => {
    setRem();
};

给html元素设置字体大小fontSize。如果当前浏览器的宽度是1920px, 通过计算，html的字体大小设置为192px，那么当前页面所有元素大小显示的就是原始设计大小，其他浏览器宽度则会按比例同比显示。

3. 如果遇到需要手动转换的情况 像下面这种情况，如何在不同大小的屏幕下，自动适配呢。

var ctx = c.getContext("2d");
ctx.moveTo(20, 120);
ctx.lineTo(110, 120);

改成如下：

function handlePx(num) {
    let fontSize = getBodySize();//当前html元素的字体大小
    let handleNum = (num / 192) * fontSize; //px转成rem 再转成px
    return Number(handleNum.toFixed(0));
}
var ctx = c.getContext("2d");
ctx.moveTo(handlePx(20), handlePx(120));
ctx.lineTo(handlePx(110), handlePx(120));

把设计稿中的px转换成 当前屏幕下的px，以适配不同屏幕的大小。