前言

---

例随着互联网的不断发展，小程序这门技术也越来越重要，很多人都开启了学习微信小程序的学习，本文就介绍了微信小程序之rpx的基础内容。

由于手机终端屏幕大小的差异，小程序页面设计的适配问题就比较突出了。因此，微信小程序推出了新尺寸单位rpx（responsive pixel）: 可以根据屏幕宽度进行自适应，并规定屏幕宽度为750rpx。注意是750rpx，重要的事再强调下，是750rpx。大家在设计页面时尺寸单位尽量选择rpx，按照750进行设计，那么就不用担心平台适配问题了，是不是很方便呢？

也许有同学会好奇，为什么是750rpx呢？这是因为微信小程序官方是推荐以iPhone 6为标准进行页面设计。在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

rpx介绍

---

rpx是小程序独有的，用来解决屏适配的尺寸单位

rpx的实现原理:

rpx的实现原理非常简单:鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配

rpx把所有设备的屏幕，在宽度上等分为750份(即当前总宽度为750rpx)

  ·在较小的设备上，1rpx代表的宽度较小

  ·在较大的设备上，1rpx所代表的宽度较大

  ·小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕的适配

单位换算

---

rpx与px之间的单位换算

开发微信小程序时，设计师可以用iphone6作为视觉稿的标准

开发举例:在iPhone6上如果要绘制宽100px，高20px的盒子，换算成rpx单位，宽高分别为200rpx和40rpx

可以根据屏幕进行自适应，规定屏幕宽为750rpx，如在iphone6上，屏幕宽度为375px，共有750个物理像素，则 750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素

示例

---

使用px布局，机型在iphone 6/7/8上的样式

wxss代码：

.item-demo {
  width: 100%;
  height: 70px;
  float: left;
  background: #ddd;
}
.item-demo view:nth-child(1) {
  width: 300px;
  height: 100%;
  float: left;
  font-size: 14px;
}
.item-demo view:nth-child(2) {
  width: calc(100% - 300px);
  height: 70px;
  float: left;
  box-sizing: border-box; 
}
.item-demo view:nth-child(2) image{
  width: 70px;
  height: 70px;
}

切换至iphone 5的机型：

因此，微信小程序的rpx主要解决的就是这类问题。示例：

使用rpx布局，机型在iphone 6/7/8上的样式

/* pages/category/category.wxss */
@import "../../templates/common/common.wxss";

.item-demo {
  width: 100%;
  height: 140rpx;
  float: left;
  background: #ddd;
}
.item-demo view:nth-child(1) {
  width: 600rpx;
  height: 100%;
  float: left;
  font-size: 28rpx;
}
.item-demo view:nth-child(2) {
  width: calc(100% - 600rpx);
  height: 140rpx;
  float: left;
  box-sizing: border-box; 
}
.item-demo view:nth-child(2) image{
  width: 140rpx;
  height: 140rpx;
}

切换至iphone 5的机型：