解決vue移動端適配問題，vue-cli3+vant-ui等第三方UI元件引入適配

走啊丶去拯救世界發表於2019-03-21
VueUI元件

1.首先把安裝amfe-flexible，這裡使用npm install

npm i -S amfe-flexible
複製程式碼

2.在入口檔案main.js中引入

import 'amfe-flexible/index.js'
複製程式碼

3.在根目錄的index.html 的頭部加入手機端適配的meta程式碼

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
複製程式碼

4.安裝postcss-pxtorem是一款 postcss 外掛，用於將單位轉化為 rem
ps：前提是ui設計的psd圖尺寸大小是750*1334，這樣我們在iphone6的模擬機上直接使用所標註的尺寸

npm i postcss-pxtorem --save-dev
複製程式碼

5.在package.json配置

  "postcss": {
    "plugins": {
      "autoprefixer": {
        "browsers": [
          "Android >= 4.0",
          "iOS >= 7"
        ]
      },
      "postcss-pxtorem": {
        "rootValue": 37.5,
        "propList": [
          "*"
        ]
      }
    }
  },
複製程式碼

或者在postcss.config.js中配置（此檔案需要在根目錄下新建）

const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')

module.exports = ({ file }) => {
  let rootValue
  // vant 37.5 [link](https://github.com/youzan/vant/issues/1181)
  if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
    rootValue = 37.5
  } else {
    rootValue = 75
  }
  return {
    plugins: [
      autoprefixer(),
      pxtorem({
        rootValue: rootValue,
        propList: ['*'],
        minPixelValue: 2
      })
    ]
  }
}
複製程式碼

溫馨提示： rootValue這個配置項的數值是多少呢？？？ 通常我們是根據設計圖來定這個值，原因很簡單，便於開發。假如設計圖給的寬度是750，我們通常就會把rootValue設定為75，這樣我們寫樣式時，可以直接按照設計圖示註的寬高來1:1還原開發。（iPhone介面尺寸：320 * 480、640 * 960、640 * 1136、750 * 1334、1080 * 1920等。）

那為什麼你在這裡寫成了37.5呢？？？

之所以設為37.5，是為了引用像vant、mint-ui這樣的第三方UI框架，因為第三方框架沒有相容rem，用的是px單位，將rootValue的值設定為設計圖寬度（這裡為750px）75的一半，即可以1:1還原vant、mint-ui的元件，否則會樣式會有變化，例如按鈕會變小。

既然設定成了37.5 那麼我們必須在寫樣式時，也將值改為設計圖的一半。

相關文章