vue-cli3.0引入postcss-pxtorem和lib-flexible 移动端适配

postcss-pxtorem配合lib-flexible，非常方便，vue-cli3.0后，项目配置被大大精简了。

安装 flexible和 postcss-px2rem（命令行安装）

npm install lib-flexible --save
npm install postcss-pxtorem --save-dev
或者：
npm install postcss-px2rem --save-dev

postcss-pxtorem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据标签的font-size值来计算出结果，1rem=html标签的font-size值。

引入lib-flexible

在项目入口文件main.js 中引入lib-flexible

import 'lib-flexible'

配置postcss-pxtorem

1.vue.config.js中配置

放在vue-cli3 项目中vue.config.js中（vue-cli3默认情况下没有vue.config.js，需要手动在项目根目录创建）
//////////////////待补充

2.postcss-pxtorem 在postcss.config.js中配置

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 75,//
      propList: ['*']// 设置哪些属性可以从px变为rem。“！”表示不匹配，“ !font* ”表示不匹配字体相关属性
    }
  }
}

或者postcss-px2rem

module.exports = {
  css: {
      loaderOptions: {
        css: {},
        postcss: {
          plugins: [
            require('postcss-px2rem')({
              remUnit: 75
            })
          ]
        }
      }
  }
}

配置完成后，重启一下项目。

使用

下面来看我们的代码，代码中我们直接用px来写宽高：

image.png

image.png

再来看下html根字体的大小

image.png

image.png

rootValue：通常我们是根据设计图来定这个值，原因很简单，便于开发。假如设计图给的宽度是750，我们通常就会把rootValue设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
即：如果你设计稿的长度是750基数的可以将rootValue的值修改为75