uni.upx2px() 需在 dom 渲染完成后调用，否则因屏幕上下文未稳定导致值漂移；应配合 nexttick、resize 监听或 createselectorquery 使用，并注意跨端差异与亚像素渲染问题。
uni.upx2px() 调用时机不对，转换值会漂移
很多开发者在 onMounted 里直接调用 uni.upx2px(375)，以为能拿到“屏幕一半宽度的 px 值”，结果在横屏切换、键盘弹出、或页面未完成 layout 时，uni.getSystemInfoSync().screenWidth 还没稳定，导致返回值偏小甚至为 0。这不是 API 有 bug，而是它依赖当前运行时的屏幕上下文。
实际建议：
- 需要精确尺寸时，改用
uni.createSelectorQuery()获取目标元素真实boundingClientRect，再结合screenWidth反推 rpx 比例，比静态转换更可靠 - 若必须用
uni.upx2px()，请包裹在nextTick或setTimeout(..., 0)中，确保 DOM 已完成初始渲染 - 监听
resize事件（H5）或onWindowResize（App/小程序），并在回调中重新计算，避免横竖屏切换后值失效
rpx 转 px 后参与 calc() 或动态样式，小数点引发亚像素错位
比如 uni.upx2px(1) 在 DPR=2 的 iPhone 上返回 0.5，你把它塞进 style="height: calc(var(--h) * 1px)"，最终浏览器渲染时可能四舍五入成 0px 或 1px，相邻元素边缘就漏底色——这和 rem 方案里的 0.5px 间隙本质相同，只是源头不同。
关键不是“怎么四舍五入”，而是“谁来控制舍入时机”：
- 避免在 CSS 里对动态注入的 px 值做二次运算（如
calc(var(--h) * 2)），优先让 JS 算完整数再传入 - 用
Math.round()或Math.floor()显式取整，例如：const px = Math.round(uni.upx2px(1)) - 若需保留亚像素精度（如动画微调），改用
transform: translateY(${offset}px)，它走合成层，支持 0.1px 级别控制
不同平台对 rpx 解析逻辑不一致，导致转换结果不等价
微信小程序的 rpx 是严格按 screenWidth / 750 比例缩放；而 UniApp 的 upx 单位在 App 端会额外叠加一层字体缩放系数（fontSize 设置影响），H5 端则可能受根元素 font-size 或 viewport 缩放干扰。这意味着同一段 uni.upx2px(100)，在 MP-WEIXIN、APP-VUE、H5 三个环境返回值可能相差 ±0.3px。
应对策略要分场景：
- 仅用于布局尺寸（如宽高 margin）：坚持用 upx 写死样式，彻底避开转换
- 需与 Canvas/WebGL 坐标对齐：统一以 H5 的
window.devicePixelRatio为基准，在各端手动模拟缩放逻辑，绕过uni.upx2px() - 涉及第三方 UI 库（如 uView 的
u-popup）需传 px 参数时：查清该库内部是否已做平台适配，否则手动加/* #ifdef MP-WEIXIN */.../* #endif */条件编译
设计师给的 px 设计稿，直接转 rpx 后仍出现缝隙
常见做法是把设计稿 750px 宽度下的 1px 边框写成 1rpx，但实际在 DPR=3 的设备上，1rpx = 1px CSS 像素 = 3 物理像素，视觉上还是粗线；而在 DPR=1.5 的安卓机上，1rpx = 1.5px → 渲染时被插值模糊
真正要解决的不是单位换算，而是“物理线条密度”：
- 边框类需求，优先用伪元素 +
transform: scaleY(0.5)实现视觉0.5px，兼容性比原生0.5px更稳 - 卡片分割线、列表间隔等，改用
background: linear-gradient(to bottom, #eee 50%, transparent 50%)配合background-size: 100% 1px，规避所有单位转换 - 如果必须用 px 值，根据
uni.getSystemInfoSync().pixelRatio动态设 border-width：border-width: ${1 / pixelRatio}px，再用transform: scaleY(pixelRatio)补偿高度
跨端单位裂缝的本质，从来不是“rpx 和 px 谁更好”，而是不同平台对“1 个逻辑单位应占据多少物理像素”的解释权不统一。最省事的解法，是让视觉元素尽量脱离像素级控制——用 flex gap、grid line、SVG path 或 canvas 绘制替代纯 CSS 尺寸驱动。一旦开始手动转换，就必须接受：每次 uni.upx2px() 返回的都不是确定值，而是一个带环境噪声的近似量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
