一、安装依赖

  1. yarn add postcss-pxtorem amfe-flexible    //实现适配
  2. yarn add vant

二、在main.js中引入依赖

  1. import "amfe-flexible/index.js"
  3. import Vant from 'vant'
  4. import 'vant/lib/index.css'
  5. Vue.use(Vant)

三、配置 postcss.config.js

  1. module.exports = {
  2.   plugins: {
  3.     'autoprefixer': {
  4.       browsers: ['Android >= 4.0', 'iOS >= 7']
  5.     },
  6.     'postcss-pxtorem': {
  7.       rootValue: 37.5,   //如果样稿是1080px,这个地方要改
  8.       propList: ['*']
  9.     }
  10.   }
  11. }

  • tip: 在public/index.html下一定要加上视口，之前注销现在要加上

    1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

  • content属性

    1. width:可视区域的宽度，值可为数字或关键词device-width
    2. height:同width
    3. intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
    4. maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
    5. maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
    6. user-scalable:是否可对页面进行缩放，no 禁止缩放