vue2移动端适配的解决方案

在vue2的时候我们可以使用lib-flexible + postcss-pxtorem 去对移动端进行适配，不过lib-flexible这个过度方案弃用了

vue3移动端适配的解决方案

vue3中用amfe-flexible + postcss-pxtorem，vant也推荐用这两搭配

(vant中关于移动端适配的说明)[https://vant-ui.github.io/vant/#/zh-CN/advanced-usage]

yarn add amfe-flexible
yarn add -D postcss-pxtorem

安装完后我们先在main.js中引入amfe-flexible

import 'amfe-flexible'

接着在项目根目录新建一个postcss.config.js文件

如果你的项目不考虑放PC端的页面的话，直接把下面的代码拷贝到上面创建的js文件里就好了：

// postcss.config.js
module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue({ file }) {
                return file.indexOf('vant') !== -1 ? 37.5 : 75; // 因为vant框架是以375px的稿子为基础的，所以需要适配一下
            },
            propList: ['*'], // 需要转换的css属性，默认*全部
        }
    }
}

配置完之后我们就可以在项目中以px为单位去开发了，是的，不用我们手动敲rem转换去开发了，PS设计稿的宽度以750px为基准，否则需要自己调一下，开发时稿子是1px，你就写1px就好了，插件会帮我们换算成rem。

字体不使用rem的方法