当前位置: 首页> 财经> 股票 > uniapp适配解决方法

uniapp适配解决方法

时间:2025/8/26 7:43:48来源:https://blog.csdn.net/weixin_68658847/article/details/140324745 浏览次数:0次

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。

如下图设计稿宽度为1920

在这里插入图片描述
------根据·公式设计稿宽度 / 750 = 比率 则1920/750=2.56 计算出1920宽度设计稿所占标准750百分比------

为了方便在Hbuilder X中 点击工具>设置>语言服务配置中拉到最下面有个px转rpx/upx,把上面计算的比率放进去

在这里插入图片描述
实际效果:

在这里插入图片描述
这样就根据自己输入的px尺寸自动转换为对应的upx尺寸了

选择upx就可以了

关键字:uniapp适配解决方法

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: