vant 2.9.3
vue/cli 4.4.6
根据官网的Rem适配说明,下载安装了postcss-pxtorem、lib-flexible,并且按照官方推荐的方式做了设置,我看见有人说写px并回车这些工具会自动将px换算成rem,但我不知道该怎么使用,我也看不到效果。
配置:
// vue.config.js
css: {
loaderOptions: {
sass: {
// to: sass-loader
prependData:
'@import "@/assets/scss/_variables.scss";@import "@/assets/scss/style.scss";'
},
postcss: {
// to: postcss-loader
plugins: [
autoprefixer({
overrideBrowserslist: ["Android >= 4.0", "iOS >= 8"]
}),
pxtorem({
rootValue: 37.5,
propList: ["*"]
})
]
}
}
}
例如我需要在375*667
(iPhone6/7/8)的尺寸设置20px的字体font-size:20px
,在切换成414*736
(iPhone6/7/8 plus)的尺寸还是20px,并没有进行自适应。
另外,除了postcss-pxtorem、lib-flexible,我在项目中使用了自己日常习惯的style.scss,也包含了字号的px到rem转化,拿20px字号为例,在375*667
(iPhone6/7/8)显示的是19.9999px,类似这种都不是整数的情况。这种情况正常吗?有了vant官方的建议,我是不是该放弃使用style.scss中的字号样式?
感谢提出建议!
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…