// postcss.config.js
// import px2viewport from 'postcss-px-to-viewport'
const px2viewport = require('postcss-px-to-viewport');
module.exports = {
plugins: [
px2viewport({
// vant
viewportWidth: 375,
exclude: [/^(?!.*node_modules\/vant)/],
// include: [/node_modules\/vant/],
}),
px2viewport({
// 非vant
viewportWidth: 750,
exclude: [/node_modules\/vant/],
}),
],
};
解决:vant官网提供的适配是这对vant 375尺寸做的适配, 但是我们使用的设计稿是750的,这种情况如何如何让vant适配同时750的设计稿也做适配????
步骤:
1、做排除项,如果查到node_modules中有vant那所有的vant就按照375做适配,对vant组件库没有任何影响
2、对于750的设计稿就还是按照750来做适配,在设计稿上量取的尺寸是多少就直接写成多少px,会自动转换成vw和vh
PS:
vant组件库显示的是100px会根据375转化做适配
750px设计稿:量取宽度750px会自动转换成100vw