【亲测】Vue + flexible + postcss-pxtorem + VantUI组件库实现移动端px和rem适配

2023-11-15 14:46:46

以前做项目使用过VantUI，因为需要适配设计稿尺寸所以要通过转换px/rem以达到适配，特地记录方法，使用vue版本为2.5.2

转换原因

VantUI组件库的设计稿尺寸是375，如果你的移动端项目设计稿是640或750的话，在使用部分组件（如Toast）时，会因为尺寸对应不上导致其他尺寸下组件样式可能会有问题（如提示框及字体过小），如果单纯将单位改为rem也不便于开发，需要自己根据设计稿重现计算对应的rem

转换步骤

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

安装amfe-flexible

主要用于设置 rem 基准值，我目前装的版本是2.2.1

npm i amfe-flexible -S
# 指不指定版本都行，我用的是2.2.1，选一个就行
npm i amfe-flexible@2.2.1 -S

在main.js中引入

// 引入amfe-flexible
import "amfe-flexible/index"

安装postcss-pxtorem

是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位

注意：要安装6.0.0以下的版本才可以，不包含6.0.0，否则项目启动时会报错找不到vantui的样式

注意2：vantui官网写着要>= 5.0.0，亲测5.0.0和5.1.1版本可用

npm i postcss-pxtorem@5.1.1 -S
# 这2个版本亲测可用，选一个就行
npm i postcss-pxtorem@5.0.0 -S

配置.postcssrc.js文件

如果安装完postcss-pxtorem后根目录下没有.postcssrc.js文件（p前面有一个点），可手动创建一个，将下面的配置拷贝过去，项目编译时会自动将样式文件里的px转换为对应的rem，这里要注意行内样式并不会转换

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官网对于移动端自适应的说明地址：

https://vant-contrib.gitee.io/vant/#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei#qi-ta-she-ji-gao-chi-cun

码农公寓