vite3+vue3 postcss-pxtorem 实现css自适应设备（px转rem）

最近新开一个项目是做公司前台的大屏展示，但我不知道屏幕的尺寸，所以考虑使用自适应css，这样只需要知道设计稿宽度就能适配任意尺寸的屏幕，达到一个1：1还原的效果，前提是设计稿长宽比和屏幕长宽比相等。

1.安装postcss-pxtorem

yarn add postcss-pxtorem -D

安装命令使用的yarn ,习惯使用npm或其他包管理工具的自行替换

package.json同级目录创建postcss.config.js文件

export default {
    plugins: {
        autoprefixer: {
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8",
                "last 10 versions", // 所有主流浏览器最近10版本用
            ],
            grid: true,
        },
        'postcss-pxtorem': {
            rootValue: 124, // 设计稿宽度 / 10
            propList: ['*'],
            unitPrecision: 5
        }
    }
}

使用的时候就按照实际的项目改rootValue

比如我这张设