Vant移动端适配

安装依赖

# amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。
# postcss-pxtorem是postcss的插件，用于将像素自动转成rem单位。
yarn add amfe-flexible postcss-pxtorem -D
yarn add autoprefixer -S

编辑index.html 修改 viewport

html

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover">

在main.ts中导入

import 'amfe-flexible'

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

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        "last 10 versions"
      ],
      grid: true,
    },
    'postcss-pxtorem': {
      // 设计图是375px的时候，如果是750px的设计图则设置成75
      rootValue: 37.5,
      propList: ['*'],
      unitPrecision: 5
    }
  }
}

Vant移动端适配 ​

Vant移动端适配