Vant提供的rem布局适配方法

以下是vant官网说明：

如果需要使用rem单位进行适配，推荐使用以下两个工具:

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

lib-flexible用于设置rem基准值

PostCSS示例配置

下面提供了一份基本的PostCSS示例配置，可以在此配置的基础上根据项目需求进行修改。

//postcss.config.js
module.exports = {
	plugins: {
		'postcss-pxtorem’: {
		rootvalue: 37.5,
		propList:[’*']，}，
		},
    },
};

步骤

1.安装amfe-flexible：

npm i -S amfe-flexible

然后在src 下的main.js 中引入该模块：

import 'amfe-flexible'

当屏幕大小改变时，会自动改变页面基准值

2.安装postcss-pxtorem：

npm install postcss-pxtorem --save-dev

然后在项目根目录中创建 postcss.config.js 文件，把下面内容复制到文件中并保存。

//不同设计稿尺寸
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: ['*'],
        },
    },
};

注意：这个工具无法转换行内样式

3、重启项目。