vue3+vant移动端适配 px转换rem

Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：

postcss-pxtorem 是一款 postcss 插件，用于将 px 单位转化为 rem

lib-flexible 用于设置 rem 基准值

1.安装依赖

yarn add amfe-flexible
或者使用
npm i amfe-flexible

   复制区： yarn add amfe-flexible                             npm i amfe-flexible

然后在 main.js 中加载执行该模块：

import 'amfe-flexible'

 复制区： import 'amfe-flexible'

2.安装postcss-pxtorem依赖：

yarn add -D postcss-pxtorem
或者是
npm install postcss-pxtorem -D
这里解释一下：# -D 是 --save-dev 的简写 把依赖包的版本信息写进 package.json 文件里面

 复制区： yarn add -D postcss-pxtorem         npm install postcss-pxtorem -D

然后在项目根目录中创建 postcss.config.js 文件：

/*     这个postcss.config.js 是与public文件夹同级的！    */

module.exports = {
    plugins: {
        // postcss-pxtorem 插件的版本需要 >= 5.0.0
        'postcss-pxtorem': {
            rootValue({ file }) { // 判断是否是vant的文件 如果是就使用 37.5为根节点字体大小
                // 否则使用75 因为vant使用的设计标准为375 但是市场现在的主流设置尺寸是750
                return file.indexOf('vant') !== -1 ? 37.5 : 75;
            },
            // 配置哪些文件中的尺寸需要转化为rem *表示所有的都要转化
            propList: ['*'],
        },
    },
};
这个文件会被自执行

 复制区： 

module.exports = {
    plugins: {
        // postcss-pxtorem 插件的版本需要 >= 5.0.0
        'postcss-pxtorem': {
            rootValue({ file }) { // 判断是否是vant的文件 如果是就使用 37.5为根节点字体大小
                // 否则使用75 因为vant使用的设计标准为375 但是市场现在的主流设置尺寸是750
                return file.indexOf('vant') !== -1 ? 37.5 : 75;
            },
            // 配置哪些文件中的尺寸需要转化为rem *表示所有的都要转化
            propList: ['*'],
        },
    },
};
这个文件会被自执行

标签：vant,适配,px,rem,flexible,postcss,pxtorem,amfe
来源： https://blog.csdn.net/HeXinT/article/details/121175121