1. 前言
在开发小程序时，需要将设计图上的尺寸转换为代码中的实际尺寸。而在这个过程中，做出正确的单位选择是很重要的。
在小程序中，常用的单位有 px、rpx，这两种单位的选择会直接影响到程序的精度和效果。因此，本篇文章将会详细介绍小程序中 rpx 与 px 的区别。
2. 什么是rpx和px
2.1 px
px 是我们最常使用的单位之一，因为在 PC 端的开发中，绝大部分时候都是使用 px 作为长度单位的。px 的大小是相对于显示器屏幕分辨率而言的，是一种绝对长度单位，所以像素是不会变的。
width: 32px;
height: 32px;
以上代码将元素的宽和高都设置成了 32px，这样元素的大小就是一个固定的值，不会因为设备不同而发生变化。同时，我们也可以写成：
width: calc(32 / 750 * 100%);
height: calc(32 / 750 * 100%);
其中，750 是设计图的尺寸，也是小程序中默认的屏幕宽度，它与设备本身的屏幕宽度是没有关系的。这样的转换方式，将会把 px 根据设计图的宽度转化为百分比。这时，元素的大小不会因为设备不同而发生变化。但是，这样的计算方式会让我们的开发变得繁琐不便。
2.2 rpx
rpx，也就是responsive pixel（响应式像素），是微信小程序专用的尺寸单位。rpx 的大小是相对于屏幕宽度而言的，屏幕宽度是指小程序的屏幕宽度（750rpx），因为这是小程序的最小视口单位，在所有屏幕尺寸下都保持一致。
width: 32rpx;
height: 32rpx;
以上代码将元素的宽和高都设置成了 32rpx，这样元素的大小将会自适应各种屏幕尺寸，无论是大屏手机还是小屏手机，都能保持相对的大小。
3. rpx和px的区别
3.1 精度
在不同设备下，rpx 和 px 的实际像素数目是不同的，所以我们在选择单位时，需要考虑到精度问题。
px 的精度较高，因为它是绝对长度单位，所以在大多数情况下都可以满足我们的需求。而 rpx 属于相对长度单位，它将根据屏幕的宽度进行相应的放缩，因此在涉及较小尺寸的元素时，可能无法保证精度的统一性。
3.2 稳定性
当我们的页面中涉及到不同设备之间的兼容性问题时，rpx 会给我们带来更稳定的效果。尤其是在不同设备分辨率差异较大的情况下，rpx 能够保证我们可以更方便的进行开发。
4. 总结
rpx 是相对长度单位，它能够根据屏幕的宽度进行相应的放缩，因此在对页面的大小，间距等有较高的统一性需求时，使用 rpx 会更方便快捷。
而 px 是绝对长度单位，它可以保证精度的一致性，适用于对样式要求比较严格的场合。