vue项目，移动端适配问题

postcss-pxtorem插件使用

1、在vue-cli2中的设置：

在根目录.postcssrc.js配置文件中设置：
module.exports = {
  plugins: {
    'postcss-pxtorem':{
      rootValue: 75,
      unitPrecision: 5, // 最小精度，小数点位数
      propList: ['*','!font*'], // !不匹配属性（这里是字体相关属性不转换）
      selectorBlackList: [],
      minPixelValue:2 // 替换的最小像素值
    }
  }
}
复制代码

2、在vue-cli3的设置：

在根目录postcss.config.js配置文件中设置：
module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 75,
      unitPrecision: 5,
      propList: [ '*', '!font*' ],
      selectorBlackList: [],
      minPixelValue: 2
    }
  }
}
复制代码

lib-flexible的使用

1、设置index.html的meta标签属性

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
复制代码

2、安装lib-flexible

npm install --save lib-flexible
复制代码

3、在main.js中引入lib-flexible

import 'lib-flexible'
复制代码

4、使用pxcook打开UI给的设计稿

4.1 切换为开发面板  
4.2 单位选择： rem  
4.3 基数设置   
    若是UI设计稿是基于640px设计的就将基数设置为64  
    若是UI设计稿是基于750px设计的就将基数设置为75  
4.4 小数点设置  
    必定要设置这个小数，不然适配会出问题（推荐设置为三位，小数点位数越多精确度越高）  
4.5 ui设计稿内显示的rem多少，开发时候css就是多少
复制代码

5、不使用pxcook的用法，可直接写一个scss计算方法（手淘方案）

5.1 引入flexible
5.2 拿到设计稿除以10，获得font-size基准值
5.3 lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，若是有 meta name="viewport"标签，须要将他注释掉，由于若是有这个标签的话，lib-flexible就会默认使用这个标签。而咱们要使用lib-flexible本身生成的 meta name="viewport"来达到高清适配的效果
5.4 设计稿px / font-size基准值,便可换算为rem

    @function px2rem($px) {
      $rem: 75;
      @return ($px / $rem) + rem;
    }
    用法：px2rem(10)
复制代码