一分钟快速上手uni-app适配解决方法

uni-app的专属强大自适应单位upx,rpx,不能动态赋值解决办法…

uni-app 使用 upx 作为默认尺寸单位, upx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。

开发者可以通过设计稿基准宽度计算页面元素 upx 值,设计稿 1px 与框架样式 1upx 转换公式如下:

设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx

举例说明:
若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 *100 / 640,结果为:117upx。

若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 B 在uni-app 里面的宽度应该设为:750 * 200 / 375,结果为:400upx。

如图设计稿宽度为411

在这里插入图片描述

------根据·公式 411/750=0.548 计算出所占标准750百分比------

为了方便在Hbuilder X中 点击工具>设置>编辑器设置中有个px转rpx/upx

在这里插入图片描述

实际效果:

在这里插入图片描述

这样就配置好了,全局的

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值