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)
複製代碼