Vue适配移动端

583 阅读1分钟

解决vue移动端适配问题,vue-cli3+vant-ui等第三方UI组件引入适配

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

 npm install amfe-flexible -D

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

npm install postcss-pxtorem -D

5.在package.json配置

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

6.使用

  屏幕宽度大于375的设计图上的像素/37.5 + 'rem'