rpx单位的由来
rpx单位最初由微信推出，它与我们常用px一个很大的区别就是具有响应式，可以参考一下我们学web开发时用的rem、vw、vh等单位，再看看微信官方文档对此的描述：
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
随着智能手机的发展，手机屏幕也越来越怪，不再是以前的16:9，屏幕也是各种大小，这也更需要前端去做响应式、自适应来适配不同设备。所以也就会有像rpx这种响应式的单位出现。
uni-app之前是使用upx，后面也是改用了rpx，做了统一，详细的可以看看官方的公告：推荐使用rpx替代upx的公告。
为什么要去转换单位
有人要问了，项目直接全用rpx单位就行了，为什么还要去转换单位呢？
其实这也是迫不得已，有些场景还是会有px单位的出现，比如说，调用uni-app中的uni.getSystemInfoS ync(OBJECT)，这个api就是拿设备的信息的，可以拿到像我们常用的可使用窗口高度windowHeight，屏幕宽高screenWidth、screenHeight等。拿到的是一个数值，它用的就是px单位
像我们为了自定义导航栏，去动态地算导航栏的高度，拿回来的也是px单位的数值，但项目中用的是rpx，这难免要有px数值和rpx数值之间的计算，还有就是我们用的组件库，它的很多默认样式或设置都是px单位的数值，这个我们后面会说。
单位转换公式
说了这么一大堆，我们再来看看rpx和px有什么关系。
rpx单位规定如果在iPhone6下，也就是屏幕宽度375px，则
750rpx = 375px = 750物理像素
1rpx = 0.5px = 1物理像素
这也是很多人推荐用iphone6模拟开发的原因之一，单位转换很直观，就是2:1，但是不是在所有设备上都是2:1呢？曾经我也是怎么认为的，然后老出bug.....，其实这是有转化公式的，不是简简单单的2:1。
总的来说，还是以750这个物理像素为基准
px / rpx = screenWidth / 750
然后我们就可以推出：
rpx = (750 * px) / screenWidth
px = (screenWidth * rpx) / 750
// rpx转px
rpxToPx(rpx) {
const screenWidth = uni.getSystemInfoSync().screenWidth
return (screenWidth * Number.parseInt(rpx)) / 750
}
// px转rpx
pxToRpx(px) {
const screenWidth = uni.getSystemInfoSync().screenWidth
return (750 * Number.parseInt(px)) / screenWidth
}
uView中的单位转换问题
uView这个组件库有不少的坑，有一个就是单位问题，uView中的很多配置都是px单位的，这跟我们项目中rpx难免就会不协调，举个例子：像u-icon这个图标组件，他有个配置项可以设置大小，但是只能设置px单位。
这是在iPad模拟的，因为图标的大小单位是px，不是自适应单位，字体单位是rpx，可以自适应，这显得图标非常小，那么我们要怎么解决呢？
当然，uView是可以更改默认单位配置，官方文档有教怎么配置。
只不过产生了更难受的问题，像u-loadmore这个组件，加载图标变得非常的小，还没有配置项去改，还有u-button前置图标等等同样的问题，希望官方能尽快修复下。
第二种方法就是自己根据需要去转换单位，uView也提供了相应的方法供我们去转换
但我们手动去实现也是很简单的，我们就用我们上面封装的一个方法，然后在组件中使用它，我们传的是rpx数值，最终根据屏幕宽度自适应地转换成对应px数值。
效果是可以不管在哪台设备上，都能实现自适应大小。
补充
如果在项目中大量使用单位转换的话，像频繁使用uView中的组件，使用封装的单位转换方法，我们是可以考虑做一下优化的。
因为是Vue2项目嘛，我们可以采用Vue原型挂载或者全局混入，这里我们采用全局混入。
mixin.js：
export const globalMixin = {
// rpx转px
methods: {
rpxToPx(rpx) {
const screenWidth = uni.getSystemInfoSync().screenWidth
return (rpx * Number.parseInt(screenWidth)) / 750
},
},
}
main.js：
import { globalMixin } from "@/mixin.js"
Vue.mixin(globalMixin)
然后，我们就可在项目中随意使用他们了。
网友评论