vue项目，移动端适配问题

postcss-pxtorem插件使用

一、在vue-cli2中的设置：

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

二、在vue-cli3的设置：

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

lib-flexible的使用

一、设置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">

二、安装lib-flexible

npm install --save lib-flexible

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

import 'lib-flexible'

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

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

五、不使用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)