uni-app响应式单位rpx

Posted 2023-04-04 loyd3

单位

rpx是响应式px
rpx是一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx正好是屏幕的宽度。屏幕变宽，rpx实际显示效果会等比放大，但在App端和h5端，屏幕宽度达到960px时，默认将按照375px的屏幕宽度进行计算。在开发移动端项目时选择rpx作为尺寸单位。
uni-app在App端，H5端和小程序都支持rpx，并且可以配置不同屏幕宽度的计算方式。

页面元素在uni-app的宽度计算公式如下：
750 * 元素在设计稿中的宽度 / 设计稿基准宽度

举例说明：

1. 若设计稿宽度为750px，元素A在设计稿上的宽度为100rpx， 那么元素A在uni-app中的宽度应该设计为750 * 100/750，即100rpx
2. 若设计稿宽度为640px，元素A在设计稿上的宽度为100rpx， 那么元素A在uni-app中的宽度应该设计为750 * 100/640，即117rpx
3. 若设计稿宽度为375px，元素A在设计稿上的宽度为200rpx， 那么元素A在uni-app中的宽度应该设计为750 * 200/375，即117rpx

但是要注意的是

1. 不要对响应式单位依赖太严重了，比如组件高度或字体大小也使用rpx。只有当你需要某元素的单位要根据屏幕宽度大小变化时，才需要rpx这类动态宽度单位。
2. 一般情况下高度和字体大小是不应该根据屏幕宽度变化的，除非你的字体大小想根据屏幕宽度变化。
3. rpx不支持动态横竖屏切换计算，使用rpx建议锁定屏幕方向

拓展：在设置文件mainfest.json里开启px转rpx（默认关闭），所有的px可一键转换为rpx

“transformPx”:false

rpx直接支持动态绑定

<view class="test" :style="width:winWidth + 'rpx;'"></view>

uni-app之响应式单位upx和rpx

参考技术A 重点 ：官方推荐使用rpx替代upx，参考： 推荐使用rpx替代upx的公告 。

注意 ：响应式单位upx和rpx是动态宽度单位

拓展 ：在设置文件mainfest.json里开启px转rpx（默认关闭 "transformPx" : false, ），所有的px可一键转换为 rpx：