PostCSS plugin postcss-pxtorem requires PostCSS 8. Migration guide for end-users:移动端配置rem适配，vant样式问题

环境状况：移动端，vue，vant，lib-flexible

不用vant的一些样式的话，其实没啥问题的，直到在ios上发现弹出框特别小，而且输入框也特别小。我就感觉肯定有些配置原因。查找各种资料之后，终于找到了原因。

原因

配置了lib-flexible后，代表所有单位都是rem，但是vant的单位是px，导致样式问题。

参考vant官方文档里面说的

完整的移动端rem配置为
1：安装lib-flexible 依赖（让页面会自动计算html的font-size）
2：去除index.html文件中的<meta name="viewport" content="width=device-width,initial-scale=1.0">
3：main.js中import 'lib-flexible'
4：安装vant（具体看官网）
5：安装postcss-pxtorem，将Vant中的样式适配cnpm install postcss-pxtorem -D
6:在vue.config.js中

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require("postcss-pxtorem")({
                        // 把px单位换算成rem单位
                        rootValue: 37.5, // 换算的基数(设计图750的根字体为75)
                        // selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
                        propList: ["*"],
                    }),
                ],
            },
        },
    },
    }

参考1，参考2

网上比较多的方法是直接指定postCss的版本为5，然后我另一个项目模拟了下，也是可以的。所以看自己选择吧，以上仅为参考。。

cnpm i postcss-pxtorem@5.1.1

很奇怪的一点是，在安卓手机上都是正常的，然后再谷歌手机环境下和ios下才会出现vant的弹出框很小，输入框很扁的问题。到现在我也不知道为啥。。