Taro项目中设置了设计稿尺寸为375,taro-ui的样式会被放大
首先以下方法只能在微信小程序中生效,在h5端并不生效,其他小程序还没有测
安装依赖
1 | npm install postcss-px-scale -dev |
安装完之后在根目录config文件夹的index文件中找到以下字段并修改
1 2 3 4 5 6 7 | designWidth: 375, deviceRatio: { 640: 2.34 / 2, 750: 1, 828: 1.81 / 2, 375:1/2 }, |
然后在当前文件中mini项中的 postcss 加入就可以了
1 2 3 4 5 6 7 8 | "postcss-px-scale" : { "enable" : true , "config" : { "scale" : 0.5, //缩放为1/2 "units" : "rpx" , "includes" : [ "taro-ui" ] } }, |
但也有的说在h5配置项中的 postcss 加入
1 2 3 4 5 6 7 8 | "postcss-px-scale" : { "enable" : true , "config" : { "scale" : 0.5, //缩放为1/2 "units" : "rem" , "includes" : [ "taro-ui" ] } }, |
在indexjs文件的h5中加入当前字段
1 | esnextModules: [ 'taro-ui' ], |
重新打包,会在h5页面看到字体大小正常
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步