VUE pc端适配移动端H5

需要安装两个插件
postcss-pxtorem 和 lib-flexible
直接安装postcss-pxtorem插件，报错“ Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”
注意：
目前 postcss-pxtorem 版本最高6.0.0,报这个错是因为插件版本太高，降成5.1.1可解决这个报错

1. 第一步

cnpm install postcss-pxtorem@5.1.1 -d
cnpm install lib-flexible --save

2. 将lib-flexible在项目入口文件中引入

// 移动端适配
import 'lib-flexible/'

通过要以上两步，就完成了在vue项目使用lib-flexible来解决移动端适配了。

lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem

3. 创建配置文件

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 50,  // 这里可以根据自己项目做修改   1rem  =   50px
      propList: ['*']
      // selectorBlackList: ['van-']
    }
  }
}

到这里就全部完成了