Vant 默认使用
px
作为样式单位,如果需要使用viewport
单位 (vw, vh, vmin, vmax),推荐使用 postcss-px-to-viewport 进行转换。postcss-px-to-viewport 是一款 PostCSS 插件,用于将 px 单位转化为 vw/vh 单位。
step1:安装postcss-px-to-viewport
npm i postcss-px-to-viewport -D
step2:在vue.config.js中使用
//vue.config.js
const pxtoviewport = require('postcss-px-to-viewport')
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
pxtoviewport({
viewportWidth: 375,
minPixelValue: 0, //px小于12的不会被转换
//***下面的两个属性不要加
// selectorBlackList: ["van-", ".my-"],//过滤掉vant-开头的元素选择器和.my-开头的类选择器
//exclude: /node_modules/i//排除node_modules目录及目录下的文件
})
]
}
},
},
}
或者在postcss.config.js中使用,我是在vue.config.js中使用的
step3:修改vant的样式,基于上一篇博客(定制主题色),在theme.less中增加如下代码
(postcss-px-to-viewport会将原先每一个以px为单位的像素大小除以3.75,转化为vw,增加如下代码是为了在vue文件中方便使用)
//theme.less
@green: #ff6f4b;
@orange: #e6a23c;
@skeleton-row-background-color: #fff;
//Padding
@padding-base: 4px;
@padding-xs: @padding-base * 2;
@padding-sm: @padding-base * 3;
@padding-md: @padding-base * 4;
@padding-lg: @padding-base * 6;
@padding-xl: @padding-base * 8;
//Font
@font-size-xs: 10px;
@font-size-sm: 12px;
@font-size-md: 14px;
@font-size-lg: 16px;
@font-weight-bold: 500;
@line-height-xs: 14px;
@line-height-sm: 18px;
@line-height-md: 20px;
@line-height-lg: 22px;
//Border
@border-width-base: 1px;
@border-radius-sm: 2px;
@border-radius-md: 4px;
@border-radius-lg: 8px;
@border-radius-max: 999px;