解決vue移動端適配問題谬墙，vue-cli3+vant-ui等第三方UI組件引入適配
1. 安裝amfe-flexible/lib-flexible
npm install amfe-flexible --save 或者 npm install lib-flexible --save
2.在入口文件main.js中引入
import 'amfe-flexible' 或者 import 'lib-flexible'
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 插件，用于將單位轉(zhuǎn)化為 rem
npm i postcss-pxtorem --save-dev
5. 添加配置信息 （二選一）
1）如果腳手架工具沒有創(chuàng)建這個 .postcssrc.js 文件经备，那就在根目錄下新建.postcssrc.js拭抬，并添加以下配置。
module.exports = {
"plugins": {
postcss-pxtorem': {
rootValue: 75,
propList: ['*', '!font-size'],
exclude: /node_modules|folder_name/i
}
}
}
2）在vue.config.js中配置
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 75,
propList: ['*', '!font-size'],
exclude: /node_modules|folder_name/i
})
]
}
}
}};
溫馨提示： rootValue這個配置項的數(shù)值是多少呢侵蒙？造虎？洒闸？ 通常我們是根據(jù)設計圖來定這個值泰讽，原因很簡單，便于開發(fā)忆畅。假如設計圖給的寬度是750犁功，我們通常就會把rootValue設置為75氓轰，這樣我們寫樣式時，可以直接按照設計圖標注的寬高來1:1還原開發(fā)浸卦。（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 那么我們必須在寫樣式時缅刽，也將值改為設計圖的一半（比如設計稿尺寸是750px啊掏，字體大小是22px的話，css的樣式字體大小就寫12px）衰猛。然后添加 exclude 忽略掉引入的 UI 框架迟蜜，還可以添加 propList 可以不轉(zhuǎn)換你所希望的值，比如 'font-size'啡省，要添加多個以逗號隔開娜睛。
