rpx 单位的由来

rpx单元最初是由微信推出的。它和我们常用的px一个很大的区别就是它是响应式的。你可以参考我们学习Web开发时使用的rem、vw、vh等单位，然后看看微信官方文档中对此的描述。 ：

rpx()：可以根据屏幕宽度进行适配。将屏幕宽度指定为 。如上，屏幕宽度为，一共有750个物理像素，则==750个物理像素，1rpx = 0.5px = 1个物理像素。

随着智能手机的发展，手机屏幕也变得越来越怪异。不再是以前的16:9了，屏幕也有各种尺寸。这也要求前端具有响应能力和自适应能力，以适应不同的设备。所以就会出现像rpx这样的响应式单位。

uni-app之前使用upx，后来改用rpx并统一了。具体可以阅读官方公告：建议使用rpx代替upx。

为什么我们需要转换单位？

有人可能会问，既然项目可以直接使用rpx单位，那为什么还需要转换单位呢？

其实这也是最后的手段。在某些情况下，px单位仍然会出现。例如，在uni-app中调用uni.sync()。该API用于获取设备信息。就可以得到我们常用的可用窗口高度。 ，屏幕宽度和高度等。您得到的是一个数值，使用px单位。

例如，为了自定义导航栏，我们动态计算导航栏的高度。我们返回的也是px单位的值，但是项目使用的是rpx。这就不可避免地需要px值和rpx值之间的计算，而这就是我们使用的组件库。它的很多默认样式或者设置都是以px为单位的值，这个我们稍后会讲到。

单位换算公式

说了这么多，我们来看看rpx和px的关系。

rpx单位指定，如果低于，即屏幕宽度，则

== 750 个物理像素

1rpx = 0.5px = 1 个物理像素

这也是很多人推荐使用模拟开发的原因之一。单位换算很直观，就是2:1，但是在所有设备上不都是2:1吗？我以前也是这么想的，但是后来bug不断出现……其实是有一个换算公式的，不是简单的2:1。

总的来说，我们还是以750物理像素为基准。

像素/RPX=/750

然后我们就可以启动：

像素 = (750 * 像素) /

像素 = (* 像素) / 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 }

单位换算问题

这个组件库有很多陷阱。其中之一是单位问题。里面很多配置都是以px为单位的。这必然会和我们项目中的rpx不一致。例如：u-icon之类的图标组件。有一个配置项可以设置大小，但是只能设置px单位。

这是在iPad上模拟的，因为图标的大小单位是px，不是自适应单位，而字体单位是rpx，可以自适应。这样就导致图标非常小，那么我们该如何解决呢？

当然，您可以更改默认的单位配置。官方文档教了如何配置。

只是更不舒服的问题又出现了。例如，在u-组件中，加载图标变得很小，并且没有配置项可以更改它。还有u-图标等同样的问题，希望官方能尽快修复。

第二种方法是根据需要转换单位，也提供了相应的方法供我们转换。

但我们手动实现却非常简单。我们使用上面封装的一个方法，然后在组件中使用它。我们传递的是rpx值，最后根据屏幕宽度自适应转换成对应的px值。

效果是无论在哪个设备上都可以实现自适应大小。

补充

如果项目中大量使用单位转换，比如经常使用的组件，我们可以考虑使用封装的单位转换方法进行优化。

因为是Vue2项目，所以我们可以使用Vue原型挂载或者全局mix-in。这里我们使用全局混合。

.js：

export const globalMixin = { // rpx转px methods: { rpxToPx(rpx) { const screenWidth = uni.getSystemInfoSync().screenWidth return (rpx * Number.parseInt(screenWidth)) / 750 }, }, }

主要.js：

import { globalMixin } from "@/mixin.js" Vue.mixin(globalMixin)

然后我们就可以在项目中自由的使用它们了。