vant 移动端rem适配

1.实现rem适配,需要安装2个依赖包:

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem;
• lib-flexible 用于设置 rem 基准值,安装时名称为amfe-flexible,参考官方文档:https://github.com/amfe/lib-flexible

npm i postcss-pxtorem -D
npm i amfe-flexible -S

 

2.在项目根目录新建 postcss.config.js 文件,里面配置为:

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [
        'Android >= 4.0',
        'iOS >= 8',
        'Chrome > 40',
        'ff > 30',
        'ie >= 8'
      ]
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
}

ps:后续项目开发设计稿尺寸设置为375px,然后直接使用px开发即可实现rem适配,插件会自动将px转化为rem.

 

3.在main.js中引入插件 amfe-flexible

import 'amfe-flexible/index.js'

4.重新启动项目:  npm run serve 

 

参考:https://youzan.github.io/vant/#/zh-CN/advanced-usage