打开微信的初始化项目案例后，我发现样式表中有一个很奇怪的单位 rpx, 很显然这是用来描述字体，位置等大小的单位，一般我们在开发中会用到的是 px, em , rem等单位，那么这个rpx是什么东西呢？

1
2
3
4
5
6
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

在微信官方的IDE中，我们看到编译之后的结果是：

1
2
3
4
5
6
.userinfo-avatar {
  width: 3.41333rem;
  height: 3.41333rem;
  margin: 0.533333rem;
  border-radius: 50%;
}

在编译的时候 128rpx 被转换成了 3.41333rem; 不过具体的转化流程还不是很清楚；

然后我就在微信官方IDE的包里面搜索rpx，然后就有收获了：

1
2
3
4
5
6
7
8
9
10
t.transformRpx = function (e) {
        if (!o(e))return e;
        var t = e.match(s);
        return t && t.forEach(function (t) {
            var n = a(t);
            n = n * r.RPX_RATE / r.BASE_DEVICE_WIDTH;
            var i = t[0] + n + "rem";
            e = e.replace(t, i)
        }), e
    }

相应的我找到了其中的两个变量：

1
2
t.RPX_RATE = 20
t.BASE_DEVICE_WIDTH = 750

所以小程序中设备的基础宽度是750px, 然后rpx到rem的转换就是

1
2
rem = rpx*RPX_RATE/BASE_DEVICE_WIDTH
# rem = rpx*20/750

深入理解：
微信小程序的设备基础是750px，因此开发的时候我们可以按照750px大小为基础开发，譬如说在750px上某个view的宽度是300px，那么在样式中就可以写 300rpx， 小程序在编译的时候会转化成rem单位的，这样方便在其他设备上扩展使用