html上的样式 ui vant_解决vue中组件库vant等ui组件库的移动端适配问题

1.首先把安装amfe-flexible，这里使用npm install

npm i -S amfe-flexible

2.在入口文件main.js中引入

import 'amfe-flexible/index.js'

3.在根目录的index.html 的头部加入手机端适配的meta代码

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": [