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

以前做项目使用过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

上一篇:vue-cli3.0 日常优化


下一篇:web前端全栈0基础到精通(祺)vue 09