vue-cli使用postcss-pxtorem和amfe-flexible适配移动端屏幕

• postcss-pxtorem px 转 rem
• amfe-flexible 屏幕尺寸自适应

1.安装postcss-pxtorem与amfe-flexible

npm install amfe-flexible -S
npm install postcss-px2rem -D

2.导入amfe-flexible到main.js

//main.js
import 'amfe-flexible/index.js'; //此文件在安装amfe-flexible模块时已自动创建，只需引入无需手动创建

3.配置vue.config.js

//vue.config.js
const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    autoprefixer(),
                    pxtorem({
                        rootValue: 75, //基准值(计算公式：设计图宽度/10)，设计图尺寸为750X1134(iPhone6)，基准值为750/10=75
                        propList: ['*']
                    })
                ]
            }
        }
    }
}

4.重启服务完成

[强烈推荐阅读] 移动端高清、多屏适配方案: https://div.io/topic/1092

其他参考链接： https://www.jianshu.com/p/f4093192e8d8