【小程序】rpx（responsive pixel）自适应像素浅析

rpx全称responsive pixel，即自适应像素，是WXSS（Weixin Style Sheet）微信样式表的尺寸单位。

我们都知道px是像素，前端写样式时用的最多的尺寸单位也是px，那rpx又是什么？它有什么用？

首先，小程序的运行环境包括手机、平板等终端设备，这些设备的显示屏尺寸大小都是不同的。

这就引出一个问题，如何让小程序运行在各种大小不一的设备中时，页面布局比例保持一致？

我们先来看下，当使用px作为尺寸单位时，同一个页面在不同设备中的表现。

<!--pages/home.wxml-->
<view>
  <image src="/images/cover-{{ index }}.jpg" wx:for="{{ 3 }}" 
    wx:key="index"></image>
</view>

/* pages/home.wxss */
view{
  width: 100%;
  height: 170px;
  background-color: rgb(248, 245, 245);
}
view image{
  width: 110px; 
  height: 150px;
  padding: 10px 5px;
}

使用px在不同设备中的页面效果

  从上图可以看到，该页面在iphoneX中的显示效果是正常的，屏幕宽度刚好放下3张海报；

换成分辨率大一点的iphone XS Max时，海报右边出现了较大的空白区域；

而换成分辨率更大的ipad时，空白区域占满了屏幕宽度的一半。

很显然，如果页面不能根据用户设备的分辨率自动进行相应调整的话，这不仅会造成页面布局的混乱，还会极大地降低用户体验。

为此，小程序给出的解决方案就是rpx，自适应像素。

那么自适应像素实现页面自适应屏幕的原理是什么？

之所以要对页面进行自适应调整，正是因为设备的屏幕大小不同，那只要统一屏幕的尺寸，问题不就解决了吗？

但由于现实原因，在物理上统一尺寸是不可能的，为此，一个统一的虚拟尺寸诞生了。

rpx规定，屏幕宽为750rpx，这里的“屏幕”指的是，所有不同分辨率的设备，它们的宽度都是统一的750rpx。

就这样，尽管在物理层面，设备的屏幕宽度各不相同，但它们都有一个相同的虚拟宽度，就是750rpx。

统一了尺寸，接下来就是如何将物理尺寸转换为相应的虚拟尺寸的问题了。只需用屏幕宽度 / 虚拟宽度，即可得到物理尺寸与虚拟尺寸的比例。

例如iphone X的屏幕宽度为375px，375 / 750 = 0.5，所以iphone 6的物理/虚拟尺寸比为1：2，换句话说，运行在iphone X的页面，1rpx = 0.5px，1px = 2rpx。

同理可推，屏幕宽度为414px的iphone XS Max，1rpx = 0.552px，1px = 1.81rpx。

知道了px和rpx之间的换算方式，我们来修改一下开头那个页面的样式表，实现与设备无关的自适应页面。

使用iphone X作为视觉稿的标准，因此1px = 2rpx，稍加修改，得到以下代码：

/* pages/home.wxss */
view{
  width: 100%;
  height: 340rpx;  /* height: 170px; */
  background-color: rgb(248, 245, 245);
}
view image{
  width: 220rpx;  /* width: 110px; */ 
  height: 300rpx; /* height: 150px; */
  padding: 20rpx 10rpx; /* padding: 10px 5px; */
}

使用rpx在不同设备中的页面效果

显而易见地，使用rpx作为尺寸单位后，页面在不同设备中实现了自适应。

为方便换算，建议使用屏幕宽度为375px的iphone X作为视觉稿的标准，因为1px = 2rpx。