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

随着手机浏览器的不断更新, 现在开发移动端, 适配解决方案当属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 的