官方说明:https://vant-contrib.gitee.io/vant/v2/#/zh-CN/advanced-usage
yarn add postcss-px-to-viewport@1.1.1 -D
项目根目录, 新建postcss的配置文件
postcss.config.js
// postcss.config.js
module.exports = {
plugins: {
'postcss-px-to-viewport': {
//vw适配的标准屏的宽度 iphoneX
//设计图 750 ,调成1倍 = > 适配375标准屏幕
//设计图 640 ,调成1倍 = > 适配320标准屏幕
viewportWidth: 375,
},
},
};
viewportWidth:设计稿的视口宽度
-
vant-ui中的组件就是按照375的视口宽度设计的
-
恰好面经项目中的设计稿也是按照375的视口宽度设计的,所以此时 我们只需要配置375就可以了
-
如果设计稿不是按照375而是按照750的宽度设计,那此时这个值该怎么填呢?