uni.upx2px()是UniApp唯一可靠的rpx→px动态转换方式,实时读取screenWidth按px=rpx×screenWidth/750计算;px→rpx需手动用rpx=px×750/screenWidth,且screenWidth必须每次调用时同步获取。

rpx 是 UniApp 多端适配的默认单位,但 px 在 canvas、原生组件、第三方库等场景不可替代;二者转换不能靠经验比例(如 2:1),必须依赖运行时设备屏幕宽度动态计算。
uni.upx2px() 是唯一可靠的 rpx→px 转换方式
这个 API 不是“可选工具”,而是 UniApp 运行时动态适配的核心入口。它每次调用都同步读取 uni.getSystemInfoSync().screenWidth,再按 px = rpx × screenWidth / 750 实时计算,确保横竖屏切换、H5 窗口缩放、平板分屏等场景下结果准确。
- 禁止在
onLaunch里缓存一次screenWidth后反复使用——横屏后值失效,尺寸错乱 - 禁止用异步
uni.getSystemInfo()获取后再调用——回调外直接执行会得到undefined - 禁止硬编码比例,例如
100 * 0.5或100 / 2——H5 端1rpx = 1px,该写法在 H5 下直接翻倍 - 返回值默认是整数(四舍五入),如需小数精度,自行封装:
Math.round(uni.upx2px(100) * 100) / 100
px→rpx 必须手动实现,且每次调用都要重读屏幕宽度
UniApp 没有提供官方 px→rpx API,唯一稳定公式是:rpx = px × 750 / screenWidth。关键在于 screenWidth 必须来自 uni.getSystemInfoSync(),且不能复用旧值。
- 错误做法:在
mounted阶段一次性计算并赋给 data 变量,后续直接用——横屏或窗口 resize 后不再更新 - 正确做法:封装为函数,每次需要时调用,例如:
const toRpx = (px) => px * 750 / uni.getSystemInfoSync().screenWidth - H5 端需额外监听
resize事件;App 端监听onWindowResize;否则窗口拉伸时 rpx 值不会自动刷新 - 设计稿宽度(如 640px、750px)只影响标注换算,和运行时转换无关——别把设计稿宽当成
screenWidth
哪些地方必须用 px,绕不开转换?
不是所有地方都能用 rpx。以下场景强制要求 px 单位,否则功能异常或渲染失败:
-
canvas绘图 API(ctx.fillRect()、ctx.font等)只接受数值 +px字符串或纯数字(实际按 px 解析) - 某些原生插件/SDK 的尺寸参数(如地图
marker图标大小、视频控件层级zIndex)明确要求 px - 使用
:style动态绑定时,若写成{ width: '200px' },此时px是传统 CSS 单位(不响应);而静态写法style="width: 200px"在旧版 uni-app 中可能被当作响应式单位(已不推荐) - 第三方 UI 库(如 uView、uni-ui 中部分组件)的
height、lineHeight等 prop 明确文档注明接收px值
容易被忽略的兼容细节
真正出问题的地方,往往藏在边界条件里:
- Android 上
1rpx边框经常“看不见”,这不是转换错误,而是系统渲染限制——建议改用border: 1px solid #eee或通过transform: scaleY(0.5)模拟 - H5 端
screenWidth返回的是浏览器视口宽度(document.documentElement.clientWidth),而非设备物理屏宽,与 App 端行为不一致,但uni.upx2px()内部已适配,无需干预 - 在
onLoad或computed中调用转换函数是安全的;但在onReady后再操作 DOM 尺寸(如getBoundingClientRect)时,务必确认样式已生效,否则 px 值可能未完成布局计算 - 不要在
pages.json的style字段里写动态 px/rpx 计算——那里只支持静态 JSON,所有尺寸必须提前转好或用条件编译


















