vue移动端 vant适配

需求背景

例如：vue移动端，设计图为750，使用了vantUi,但是vantUI的根字体默认大小是37.5，看起来就是1/2，手机上还正常，在iPad上字体就很小。
vant官方适配地址为：
https://youzan.github.io/vant/v2/#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei#liu-lan-qi-gua-pei

---

解决方案：

lib-flexible + postcss-pxtorem （postcss-pxtorem可以配置过滤）
1、安装lib-flexible：
npm i lib-flexible -S
2、安装postcss-pxtorem：
npm i postcss-pxtorem@5.1.1
（注意：不能用npm i postcss-pxtorem -S 安装，这样安装出来的是6.0.0版本会对vant没有效果，实际postcss-pxtorem还没有6.0.0版本）
3、在main.js中引入：import ‘lib-flexible’
4、修改postcss.config.js中的配置(如果没有这个文件，在根目录新建一个)

module.exports = {
    plugins: {
        // postcss-pxtorem 插件的版本需要 >= 5.0.0
        'postcss-pxtorem': {
            rootValue({
                file
            }) {
                return file.indexOf('vant') !== -1 ? 37.5 : 75;
            },
            propList: ['*'],
        },
    },
};

---