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配置 (vant 37.5)
"postcss": {
"plugins": {
"autoprefixer": {
"browsers": [
"Android >= 4.0",
"iOS >= 7"
]
},
"postcss-pxtorem": {
"rootValue": 37.5,
"propList": [
"*"
]
}
}
},
或者在vue.config.js中配置（此文件需要在根目錄下新建）
const autoprefixer =
require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {
css:
{
loaderOptions: {
postcss: {
plugins: [
autoprefixer({
browsers: ['Android >= 4.0', 'iOS >= 7']
}),
pxtorem({
rootValue: 37.5,
propList: ['*'],
})
]
}
}
}
};
溫馨提示： 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 那么我們必須在寫樣式時，也將值改為設計圖的一半（文章來源 https://www.cnblogs.com/bamboopanders/p/12897734.html，照搬筆記方便以后使用）