警惕！1px并不等于2rpx，px和rpx的转换算法

rpx什么？

rpx是微信小程序独有的、解决屏幕自适应的尺寸单位

可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为 750rpx

通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配

rpx 和 px之间的区别：

在普通网页开发中，最常用的像素单位是px

在小程序开发中，推荐使用 rpx 这种响应式的像素单位进行开发

设计师在出设计稿的时候，出的都是二倍图，也就是说如果在这个设计稿上有一个宽高为 200px 的盒子，那么它最终画到页面上实际上是一个宽高为 100px 的盒子，那么再换算成 rpx 需要乘以 2 ，就又变成了 200rpx ，跟设计稿上的数字是一样的，所以我们可以保持数字不变，直接将单位 px 替换成 rpx

iphone6分辨率是375*667,与rpx换算正好是2倍关系，便于单位计算，但是其他分辨率下并不是2倍关系。

下面是几个常见的手机尺寸上RPX和PX的关系：

设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)

iPhone5 1rpx = 0.42px 1px = 2.34rpx

iPhone6 1rpx = 0.5px 1px = 2rpx

iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx

下面提供VUE的方法 计算PX和RPX相互转换

1.rpx转px

rpxTopx: function(rpx) {
	let deviceWidth = wx.getSystemInfoSync().windowWidth; //获取设备屏幕宽度
	let px = (deviceWidth / 750) * Number(rpx)
	return Math.floor(px);
}

2 px转rpx

pxTorpx: function(px) {
	let deviceWidth = wx.getSystemInfoSync().windowWidth; //获取设备屏幕宽度
	let rpx = (750 / deviceWidth) * Number(px)
	return Math.floor(rpx);

}