vue移动方案是使用amfe-flexible 和 postcss-pxtorem 结合

1、适配方案
在本项目中我所使用的vue移动方案是使用amfe-flexible 和 postcss-pxtorem 结合）的方式。

首先介绍一下amfe-flexible

amfe-flexible 是配置可伸缩布局方案，主要是将 1rem 设为 viewWidth/10。

然后就是这个库 postcss-pxtorem

postcss-pxtorem是postcss的插件，用于将像素单元生成rem单位。

2.配置方法

第一步

​
npm install amfe-flexible --save
npm i [email protected]  --save  //这个要装5.1.1版本的

第二步

在main.js文件中导入

import 'amfe-flexible';

第三步

配置postcss-pxtorem，可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可：

为了方便 我是在 vue.config.js 配置的代码配置如下：

module.exports = {
    //...其他配置
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 37.5,
                        propList: ['*']
                    })
                ]
            }
        }
    },
}
​

注意点：

1、rootValue根据设计稿宽度除以10进行设置，这边假设设计稿为375，即rootValue设为37.5；

2、propList是设置需要转换的属性，这边*为所有都进行转换。

通过以上配置我们就可以在项目使用了。