需要安装2个依赖（amfe-flexible和postcss-pxtorem）搭配使用以实现px和rem自适配效果

安装amfe-flexible

npm i amfe-flexible -S

在main.js中引入

// 引入amfe-flexible
import 'amfe-flexible';

安装postcss-pxtorem

npm i postcss-pxtorem@5.1.1 -D

配置.postcssrc.js文件

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    // 主要是postcss-pxtorem这里的配置要有
    "postcss-pxtorem": {
      rootValue({file}) {
        // 这里需要动态设置rootValue值，以达到同时适配vant-UI和设计稿
        // 适配vant-UI的设计稿尺寸是375 / 10 = 37.5
        // 适配项目设计稿尺寸是750 / 10 = 75
        // 这里是判断要处理的文件是否是vant组件库的文件，是的话就按375设计稿尺寸走，否则按你项目设计稿的尺寸走，你项目是750就写75，是640就写64，如此类推
        return file.includes('vant') ? 37.5 : 75
      },
      propList: ["*"],
      // 排除列表，不需要将px转换为rem的文件可写在这里
      // selectorBlackList:['vant']
    }
  }
}

vantui官网对于移动端自适应的说明地址

转载请注明：有爱前端 » VantUI实现pxtorem