vant UI框架适配移动端

1.安装依赖

npm i -s amfe-flexible

npm i postcss-pxtorem --save-dev

2.main.js

在main.js中引入amfe-flexible

import "amfe-flexible";

3.index.html

修改public/index.html，增加meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"/>

4.postcss.config.js

在项目根目录下新建postcss.config.js文件

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android >= 4.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      minPixelValue: 1,
      propList: ['*']
    }
  }
}

css里边只需要写px，会自动转换成rem显示，rootValue设置为37.5，之所以设为37.5，是为了引用像vant这样的第三方UI框架，因为第三方框架没有兼容rem，用的是px单位，将rootValue的值设置为设计图宽度（这里为750px）75的一半，即可以1:1还原vant、mint-ui的组件，否则会样式会有变化，例如按钮会变小。既然设置成了37.5 那么我们必须在写样式时，也将值改为设计图的一半。