3.6　小程序自适应单位rpx简介

不知道大家是否注意到，在welcome.wxss样式表中，我们绝大多数的长度单位都设置的是rpx这个全新的单位，比如margin-top:100rpx。在小程序里，长度单位既可以使用rpx，也可以使用px。使用rpx可以使组件自适应屏幕的高度和宽度，但使用px不会。要透彻地理解rpx需要对移动端分辨率有一定的了解，比如物理分辨率px、逻辑分辨率pt等概念。这里只需要记住以下的结论，如果你不是很明白本章的内容，也没有关系，只需要记住结论即可，并不影响我们的开发。

建议以iPhone 6的宽度750个物理像素作为标准，来做设计图。在此宽度下，这张设计图里每个元素的尺寸转换到小程序样式时，转换比例为1物理像素=1rpx=0.5px。rpx和px就是小程序样式里可以使用的两种长度单位。

举个例子，我们的welcome页面设计图的宽度总长是750像素，它是以iPhone 6的尺寸来设计的，而其中的头像图片高宽为200像素×200像素。如果想在iPhone 6里正确地显示这张200像素×200像素的图片，那么相应地image组件的高宽应该设置为多少呢？

答案是要不就设置为高200rpx，宽200rpx，要不就设置为高100px，宽100px。这两个单位，在iPhone 6下显示效果一样，但如果我们将模拟器切换到其他机型，这两种不同的单位就会出现差异。rpx将随着屏幕尺寸的变化而变化，但px不会。那么到底选择rpx还是选择px呢？这取决于你需要元素随着移动设备尺寸的变化而变化，还是让元素始终保持不变，需要具体问题具体分析。

对于margin-top或者是image组件的高宽，很多时候，需要他们随着设备的尺寸不同动态地变化，以保持页面元素之间的分布可以保持“一定的比例关系”，这种情况下应该使用rpx。来看下面这个例子。

我们现在将模拟器的机型调到iPhone 4，在iPhone 4机型下，welcome页面呈现的UI，如图3-16所示。

可以看到，虽然页面的整体“变小了”，但3个元素之间、元素与页边距之间的比例还是非常和谐和美观的。

接着我们将image组件的样式.avatar更改为以下代码：

页面将在模拟器iPhone 4机型下呈现如图3-17所示。

将image组件的长度单位由rpx更改为px后，整个页面元素不再“协调”，image变得很“大”。这是因为px不会根据屏幕尺寸做自适应。

从这两张图可以看到，当image的高宽使用rpx做单位时，无论是在iPhone 6下，还是在iPhone 4下，整个页面都可以保持很好的布局，因为rpx会根据屏幕尺寸做出自动的调整。

开发者们可以自己将welcome.wxss里的rpx和px相互替换一下，或者多调整一下模拟器的机型，来感受一下rpx和px的不同。

那是不是rpx就是万能的，我们可以将页面里的所有元素的长度单位都换成rpx呢？来看看下面这个例子，在welcome.wxss里有一段这样的代码：

journey-container设置了“开启小程序之旅”这段文本的外边框。为什么其他的元素我们都使用rpx为单位而唯独border这个属性使用的是1px呢？。因为我们讲过，rpx是自适应单位，它通常非常适合用来控制图片的高宽和元素之间的间距（通常这些元素需要随着屏幕尺寸的不同而动态变化）。但我们考虑一下，border这个属性需要动态变化吗？不需要。如果border动态变化，那么它会在屏幕尺寸较大的手机上变得很粗，这并不是我们想要的效果。所以这里应当将border的单位设置为px。同理，使用px作为border-radius的单位。

最后，我们为什么要强调最好是在iPhone 6的尺寸下做设计图呢？因为只有在iPhone 6的尺寸下，设计图里的1个像素才满足下面的转换关系：

1物理像素=1rpx=0.5px

如果不以iPhone 6的标准来做设计图，也是可以的。但非iPhone 6的尺寸下，设计图与rpx、px的转换关系就不是整数倍的，计算起来比较麻烦，所以建议设计图最好以iPhone 6的尺寸标准来设计，这样换算起来很方便。这也是官方建议的一个设计标准。