问题描述
vw移动端适配方案与vant集成时会修改vant组件样式,讲vant的css中px转换为vw,导致组件缩小,效果如下图
,集成框架是参考了大漠大神的vw适配文章 https://www.w3cplus.com/mobil...
与 vant 官方文档 https://youzan.github.io/vant...
问题出现的环境背景及自己尝试过哪些方法
vant 提供的适配方案是 postcss-pxtorem,参考https://blog.csdn.net/perryli...
尝试配置了下 postcssrc.js ,无法解决问题 本项目是为了将小程序迁移至公众号, 迁移周期只有一个月,希望在迁移过程中直接将wxss 中 rpx 替换成 px 样式就可以不用再改动,这样才有可能按时完成,望各位大神指点,
相关代码
// 请把代码文本粘贴到下方(请勿用图片代替代码)
package.json中导入的包如下
"dependencies":{
"ajv":"^6.10.0",
"axios":"^0.17.1",
"babel-polyfill":"^6.26.0",
"dayjs":"^1.6.7",
"fastclick":"^1.0.6",
"flex.css":"^1.1.7",
"fuse.js":"^3.2.1",
"jquery":"^3.3.1",
"js-cookie":"^2.2.0",
"lodash":"^4.17.11",
"lowdb":"^1.0.0",
"node-sass":"^4.11.0",
"nprogress":"^0.2.0",
"postcss-aspect-ratio-mini":"^1.0.1",
"postcss-cssnext":"^3.1.0",
"postcss-px-to-viewport":"^1.1.0",
"postcss-write-svg":"^3.0.1",
"sass-loader":"^7.1.0",
"ua-parser-js":"^0.7.19",
"vant":"^1.6.12",
"vue":"^2.5.2",
"vue-awesome-swiper":"^3.1.3",
"vue-router":"^3.0.1",
"vuex":"^3.0.1",
"vuex-persistedstate":"^2.5.4",
"weixin-js-sdk":"^1.4.0-test"
},
.postcssrc.js中的配置如下
module.exports = {
"plugins":{
"postcss-import":{},
"postcss-url":{},
"postcss-aspect-ratio-mini":{},
"postcss-write-svg":{
utf8:false
},
"postcss-cssnext":{},
"postcss-px-to-viewport":{
viewportWidth:750,
viewportHeight:1334,
unitPrecision:3,
viewportUnit:'vw',
selectorBlackList:['.ignore','.hairlines'], // (Array) The selectors to ignore and leave as px.
minPixelValue:1, // (Number) Set the minimum pixel value to replace.
mediaQuery:false // (Boolean) Allow px to be converted in media queries.
},
"cssnano":{
preset:"advanced",
autoprefixer:false,
"postcss-zindex":false
}
}
}
你期待的结果是什么?实际看到的错误信息又是什么?
希望通过配置 postcssrc.js 可以让导入vant的组件样式单位不进行转换,或者无法解决时直接可以更换成类似微信小程序的 框架进行,望推荐下框架