vue+vant写webapp,postcss-pxtorem、lib-flexible配置之后怎么使用?
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中的字号样式?
感谢提出建议!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
引入之后还需要配置调用,可以看看文章https://blog.csdn.net/Coding_...