支付宝小程序的 rpx 和 px 怎么换算？

750rpx = 屏幕宽度（px）。iPhone 375px 宽时 1rpx = 0.5px，414px 宽时 1rpx ≈ 0.552px。可以用设计稿的 px 值直接乘 2 得到 rpx。

为什么小程序里的 1rpx 细线看起来不一样粗？

因为 1rpx 在 iPhone 上是 0.5px，会被设备舍入成 0 或 1 个物理像素，不同机型表现不同。要做 1px 细线请直接用 px 单位。

用 padding-bottom: env(safe-area-inset-bottom) 补齐，同时给 TabBar 容器加 box-sizing: border-box，避免被 Home Indicator 遮挡。

不太适合。rpx 字号会随屏幕宽度变化，导致字号在不同机型上不一致。推荐正文用 px，容器和间距用 rpx。

支付宝小程序的布局核心是 rpx 单位：750rpx 等于屏幕宽度。这个设计让开发者可以按 750px 的设计稿直接写代码，不用做像素换算。但 rpx 也有坑，很多开发者第一次做小程序就栽在这里。

第一，rpx 只在宽度方向按比例缩放。屏幕宽度 375px 时 1rpx = 0.5px，宽度 414px 时 1rpx ≈ 0.552px。但高度方向的 1rpx 在大多数机型上仍然是 0.5px，宽高 rpx 语义不一致，做正方形元素时要注意。

第二，小于 1px 的 rpx 会被浏览器舍入。比如 border: 1rpx 在 iPhone 上实际渲染是 0.5px，看起来比设计稿细一半。做 1px 细线要用 border: 1px solid 而不是 rpx。

第三，TabBar 和底部安全区。iPhone X 以上机型支付宝小程序底部有约 34pt 的安全区，自定义 TabBar 时要用 env(safe-area-inset-bottom) 补齐，否则会被 Home Indicator 遮挡。

第四，字体的 rpx 陷阱。用 font-size: 28rpx 在小屏手机上会变成 14px，大屏手机上会变成 15.5px，字号不一致导致视觉跳跃。建议正文用 px，间距和容器用 rpx。

在下方预览器输入你的小程序 H5 页面地址，同时对比 iPhone SE（375px）、iPhone 17（393px）和大屏安卓（414px），一眼看出 rpx 换算后是否有布局错位。