uniapp === upx vs rpx

 慎用 upx 单位：仅在维护老项目或已有组件库时，才需继续使用 upx；新开发应尽量避免使用 upx，并可逐步将 upx 单位改为 rpx，如果确实需要动态计算 upx 值，可调用 uni.upx2px()。

写在前面的话 

upx在2018年就推出了，其初衷是为了让微信的rpx机制可以跨全端使用。

在普通css写法里，upx会被编译器编译。但动态绑定时，upx无法被准确编译，此时官方提出了使用uni.upx2px()方法，用来动态计算。

后来其他几家小程序平台陆续都兼容了rpx机制，rpx不再是微信的专用单位，而成为了这个行业的通用单位。

最近官方收到很多开发小程序的用户投诉upx不能像rpx那样直接支持动态绑定，还得再使用uni.upx2px方法。

官方反思了策略，既然微信不可能支持upx的动态绑定，不如我们在App端和H5端来支持rpx的动态绑定。这样rpx就可以全端通用，且支持动态绑定，不再需要uni.upx2px方法。

从HBuilderX 2.0.5起，已经支持rpx的正常着色和px2rpx的ide代码提示转换功能。

官方也修改了uni-app文档中关于尺寸单位的介绍，不再推荐upx的使用，而推荐rpx。

这个策略调整，不影响开发者的已有代码正常运行。

开发者仍然可以使用upx和uni.upx2px，也可以改用rpx，都可以。没有必要批量调整老代码。但新开发还是应该使用rpx。

顺便提醒另一个事情，很多开发者对响应式单位依赖太严重了，比如组件高度或字体大小也使用upx/rpx。

注意只有当你需要某元素的单位要根据屏幕宽度（小范围）大小变化时，才需要rpx这类动态宽度单位。

一般情况下高度和字体大小是不应该根据屏幕宽度（等比）变化的。

upx 与 rpx 的定义

upx：uni-app 在早期作为默认的响应式长度单位，基于屏幕基准宽度 750upx进行换算。也就是说，750upx 等于设备屏幕宽度，upx 的实际像素值会根据屏幕宽度按比例放大或缩小

rpx：起源于微信小程序的“响应式像素（responsive pixel）”单位，同样以750rpx为屏幕基准宽度（750rpx 等于屏幕宽度），其实际像素值也会随屏幕宽度等比变化。uni-app 在 H5 和 App 等平台都支持 rpx 单位。

upx 的设计初衷及跨平台特性

设计初衷：upx 单位于 2018 年随 uni-app 推出，目的是将微信小程序的 rpx 响应式单位推广到全端使用，实现跨平台的适配机制  upx 在 uni-app 中与 rpx 概念类似，用于简化多终端布局，使开发者无需关心具体设备像素密度。

平台无关：upx 作为设备无关像素单位（与屏幕物理像素无关），可在多种环境中计算宽度值。在普通的静态样式表中，upx 会由编译器自动换算成对应的物理像素值；不过在动态绑定（如 :style）中，upx 则需要使用 uni.upx2px() 接口进行转换

rpx 的由来及在微信小程序中的作用

由来背景：微信小程序为了适配不同尺寸手机屏幕，设计了 rpx 响应式单位来表示宽度，解决按固定像素值开发时界面容易变形的问题，在微信小程序中，750rpx 恰好等于设备屏幕宽度；更宽的屏幕上，rpx 对应的物理像素也会等比增大。

微信小程序中的作用：rpx 使小程序的样式布局能够自动随屏幕宽度调整，开发者只需基于单一设计稿进行开发，无需针对多种分辨率手动适配，后来，许多其它小程序平台也陆续兼容了 rpx，rpx 不再只是微信特有的单位，而成为业界通用的响应式长度单位，upx 与 rpx 在屏幕适配中的表现和异同

相同点：upx 和 rpx 的换算公式原理一致，都是基于 750 作为设计宽度基准。例如，按照 uni-app 规定的计算公式：

即 750 * 元素在设计稿中的像素 / 设计稿宽度 = 元素对应的 rpx/upx 因此在静态样式中，使用 upx 或 rpx 定义的宽度在屏幕上的实际显示效果是一致的。

不同点：

动态绑定：upx 单位无法在动态绑定时自动生效，需要调用 uni.upx2px() 将 upx 值转换为 px 再赋值，而 rpx 单位在所有平台（App/H5/小程序）中均可直接动态绑定，无需额外转换 自 HBuilderX 2.0.5 起，uni-app 已支持在 App/H5 端对 rpx 的原生解析，IDE 中也会自动提示 rpx 与 px 的互转

推荐程度：官方已宣布不再推荐使用 upx 单位，转而统一使用 rpx 虽然现有代码继续运行不受影响，但在新项目和新开发中建议使用 rpx，此外，uni-app 官方文档和 API（如 uni.upx2px）也已标记 upx 相关功能为废弃，推荐使用 rpx

设计稿适配：如果设计稿宽度不为 750px，可使用换算公式或 HBuilderX 的自动转换功能将设计稿单位转换为 750 基准的 upx/rpx 注意，无论是 upx 还是 rpx，其计算公式都是相同的，只是名称不同。

如何在开发中正确使用 upx 与 rpx

首选使用 rpx：对于需要响应式适配屏幕宽度的样式（如元素宽度、外边距等），推荐使用 rpx 单位；它可在所有平台直接使用，并支持动态绑定，使用更方便

慎用 upx 单位：仅在维护老项目或已有组件库时，才需继续使用 upx；新开发应尽量避免使用 upx，并可逐步将 upx 单位改为 rpx，如果确实需要动态计算 upx 值，可调用 uni.upx2px()。

固定尺寸使用 px：一般来说，不需要随屏幕宽度变化的尺寸（如元素高度或字体大小）应使用 px 单位，以保证在不同屏幕上一致的视觉效果过度使用响应式单位（如把高度、字体也用 rpx）会导致字号和高度随着屏幕变大而变大，通常并不符合设计预期

横竖屏切换注意：rpx 在横竖屏切换时不会重新计算，为避免异常，建议使用 rpx 时尽量锁定屏幕方向（例如通过原生配置锁定屏幕），或针对不同屏幕方向编写适配逻辑。

单位转换公式与注意事项

换算公式：假设设计稿基准宽度为 DW，某元素在设计稿中的宽度为 E_px，则该元素在 uni-app 样式中对应的响应式宽度单位为：

例如设计稿宽度为 375px、元素宽度为 200px 时，对应宽度为 750 * 200 / 375 = 400rpx。如果设计稿是 640px 宽、元素宽度 100px，则对应 750 * 100 / 640 ≈ 117rpx

工具支持：若不想手动计算，HBuilderX 编辑器提供了“PX 转 upx/rpx”功能，可自动根据设定比例进行换算。在 manifest.json 中也可以配置 rpxCalcIncludeWidth、designWidth 等参数来调整全局换算基准。

注意事项：由于 upx 已不再推荐使用，尽量统一使用 rpx 并严格按照设计稿基准换算，以免混用导致布局错乱。同时，动态绑定时不要使用字符串拼接的方式写出带单位的样式，正确的做法是先用 uni.upx2px 转换或直接使用 rpx，再拼接 'px' 后赋值，最后，务必牢记：只有需要响应屏幕宽度变化的情况才使用 rpx 这类动态单位，其余场景（如固定高度、字体大小）应使用 px 以保证视觉稳定