小程序设计稿按 750 宽出，量出来标题字号 60 像素，照着写 font-size 60px，真机上大了整整一倍。改成 60rpx，比例立刻对了。

rpx 跟着屏幕宽度缩放

小程序规定屏幕宽固定为 750rpx，不管真机是 375 还是 414 逻辑像素。1rpx 等于屏宽除以 750。iPhone 6 的 375 宽下，1rpx 正好 0.5px，所以 60rpx 渲染出来是 30px。

.title { font-size: 60rpx; padding: 24rpx 32rpx; }

px 是设备无关的逻辑像素

CSS 里的 px 不等于物理像素，两倍屏、三倍屏都由系统换算。写 px 的尺寸固定，不随屏宽变化，适合放细线、图标和不希望被放大的内容。

  • 布局宽度、间距用 rpx，换机型不容易跑版。
  • 字号可以用 rpx，但平板和折叠屏上会偏大，必要时加媒体查询兜底。
  • 1px 细线别用 rpx，750 稿上写 2rpx 在不同机器上会忽粗忽细。

1px 边框的老问题

写 1px 在高分屏上仍会被渲染成两三个物理像素，看着偏粗。常见做法是用伪元素加缩放把线压细，或者用 0.5px 配媒体查询。换成 rpx 更糟，750 的稿子上 2rpx 在窄屏约等于 1px，宽屏又不到 1px。

平板和折叠屏怎么兜

rpx 按屏宽等比放大，平板上一行字能大到夸张。稳妥的写法是给字号设上限，用媒体查询在宽屏时切回 px。布局尺寸不用管，等比缩放本来就是想要的效果。

H5 里没有 rpx，只能用 vw，100vw 等于视口宽。同一套代码同时跑小程序和 H5，单位得分开写，别指望自动兼容。

要记就记一句：跟屏幕走用 rpx，跟物理清晰度走用 px。设计稿宽度先问清楚，750 和 375 混着用，怎么换算都是错的。