Vant UI 框架 Rem 适配 750/640 分辨率设计稿

Question

Vant UI 框架 Rem 适配 750/640 分辨率设计稿

Answer 1

随着手机浏览器的不断更新, 现在开发移动端, 适配解决方案当属rem + vw

Vant 文档中虽然有 REM 适配的方法, 试用 postcss-pxtorem 和 lib-flexible, 但是由于 Vant 设计稿应该是用 375 分辨率的, 如果我们的设计稿是 640 或者 750的, 换算起来则有些麻烦

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

这里如果直接修改了rootValue来适配我们自己的设计稿, 可能会导致 Vant 的 rem 数值偏小

先看rem + vw的 less 配置:

// 设计稿宽度
@vm_design: 750;
// 为什么设置 100? 设置成便于计算, 计算rem时只需要将 设计稿的宽度 / 100 即可
// 如果给的是 375 的标注图, 那就设置成 50 即可
@vm_fontsize: 100;
html {
    --tabbar-height: 100px;
    --body-width: 7.5rem;
    font-size: @vm_fontsize / @vm_design * 100vw;
    // 同时，通过Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320PX) {
        font-size: 320PX / @vm_design * @vm_fontsize;
    }
    @media screen and (min-width: 540PX) {
        --body-width: 540PX;
        font-size: 540PX / @vm_design * @vm_fontsize;
    }
}
// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540PX;
    min-width: 320PX;
    min-height: 100vh;
    margin: 0 auto !important;
    background: #f4f4f4;
    color: #000;
    font-size: 0.25rem;
    line-height: 0.36rem;
}

个人是习惯把 rootValue 设置成 100, 方便计算, 但是因为这里已经用了postcss-pxtorem, 我们也可以妥协 Vant 来设置

方法1:

修改 less 的配置:
@vm_design: 设计稿的宽度;
@vm_fontsize: 设计稿的宽度 / 100;

这样比例就和 Vant 的一样了, 写各种长度时, 直接写设计稿的 px 长度即可, 由postcss-pxtorem来自动转成 rem, 用这个方法, 基本上也就放弃了直接写 rem了

方法2:

动态设置rootValue, 即给 Vant 设置一个, 给我们自己的设计稿设置一个

1. 在项目根目录新建`postcss.config.js`文件, 内容如下:

const AutoPrefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')
module.exports = ({ file }) => {
    let remUnit
    if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
        remUnit = 50
    } else {
        remUnit = 100
    }
    return {
        plugins: [
            AutoPrefixer({
                browsers: ['last 20 versions', 'android >= 4.0']
            }),
            pxtorem({
                rootValue: remUnit,
                propList: ['*'],
                selectorBlackList: ['van-circle__layer']
            })
        ]
    }
}

还是将rootValue设置成 100, 但是因为 Vant 的设计稿是 375 的, 所以这里设置成 375 * 100 / 设计稿宽度

2. 删除`package.json`里的`postcss`相关设置

这里必须删除package.json里的postcss相关设置, 不然postcss.config.js里的配置是不会生效的

3. 这样就又可以愉快的用 rem 做单位了

PS: 在 less 中有些单位是PX, 这是postcss-pxtorem的约定, 当px写做Px或者PX时, 不会被转换成rem, 像媒体查询这类的单位是不能转成 rem 的