Vue3中 px 转 rem

为了适应手机端不同尺寸的屏幕型号，需要对字体、边距、等做响应式处理，将px的单位需要修改成rem单位。在vue3通过引入第三方插件来统一实现转换。

1、安装并配置postcss-pxtorem

为了将px单位自动转换为rem，你可以使用PostCSS插件postcss-pxtorem。首先，确保你的Vue项目已经配置了PostCSS。如果还没有配置，请按照以下步骤配置：

• 安装必要的依赖：

 npm install postcss postcss-preset-env postcss-pxtorem --save-dev

创建一个PostCSS配置文件，通常命名为postcss.config.js，并添加以下内容：

export default {
    plugins: {
        'postcss-preset-env': {
            autoprefixer: true,
        },
        'postcss-pxtorem': {
            rootValue: 16, // 基准字体大小
            unitPrecision: 5, // 转换后的rem保留小数点位数
            propList: ['*'], // 要转换的属性，默认转换所有属性
        },
    },
};

最后重启该项目即可。