微信小程序布局技巧（三）

前言

本文是微信小程序（本文后面统称小程序）布局技巧系列最后一篇文章，主要说明小程序的屏幕适配问题。本文和系列文章前两篇没有什么必然联系，当然你如果有兴趣，也可以去看看前两篇文章：

• 微信小程序布局技巧（一）
• 微信小程序布局技巧（二）

小程序适配

众所周知，小程序是以微信移动客户端为载体跑在Android和iOS设备上。而现在Android和iOS设备各种机型、分辨率、尺寸和屏幕形态都是千奇百怪，怎么样才能让我们的小程序尽可能在不同的设备上能有相同的显示效果？
先看下官方文档给出的尺寸单位的描述：

看完这张图，我们先看一段代码：

// 在 iPhone6 下运行：

var systemInfo = wx.getSystemInfoSync();
console.log(systemInfo.windowWidth); // 输出 375（单位 px）

为什么这里会是375了，iPhone6分辨率宽度明明是750，是不是哪里出问题了。很显然不是，那么究竟真相是怎么样的了？我们先来看两个概念。

物理像素

物理像素指的就是屏幕分辨率的大小，以iPhone6为例分辨率为1344*750，则屏幕宽度物理像素是750

小程序中的px

我们写样式时一个像素记作1px，但是css的px和物理像素是一一对应的吗，是同样的概念么？在pc端是这样的，因为屏幕足够大，一个css像素用一个物理像素来显示，完全可以，pc端默认情况下一个css像素就对应着一个物理像素，但是有没有发现你把分辨率调小以后，显示的内容变大了，但是显示器的物理像素肯定不会变啊，这时候其实就是一个css像素对应着若干个物理像素了，这个是与用户设置有关。

移动设备大小是有限的，而且分辨率不低，甚至比pc端更高，也就是可以显示的物理像素更多，如果和pc端一样，一个css的px和物理像素一一对应，可以想象，显示的内容有多小。这样肯定是不行的，解决这个问题，我们可以很自然的想到，那在移动设备上就别一一对应了，一个css的px对应多个物理像素吧，这样就不至于显示的内容过小了，实际上移动设备也是这么做的，你在开发时写的px和最终渲染显示的物理像素数不是一比一的，可能一个px对应2个物理像素，可能3个物理像素。

很显然小程序中的px和原生Android和iOS开发中的px(像素)不是同一个概念。而小程序中为了做屏幕适配， $\color{red}{推荐用rpx作为小程序中的尺寸单位，而且规定了所有的屏幕宽度都是750rpx}$,并且建议设计师以iPhone6作为视觉稿的标准。这样在iPhone6上标准的尺寸则可以直接在小程序上用rpx来实现。

px和rpx转换

如果遇到设计稿不是iPhone6的情况我们怎么做了？这时我们可以将rpx和px之间做相互转换，转换公式如下：
px = rpx / 750 * wx.getSystemInfoSync().windowWidth;

应用

今天就用学到的适配知识来实现一个小例子，长下面的样子：

总共界面是750rpx,每个item左右间距为40rpx，上下是20rpx，剩下的宽度670用来放图片，两个间隔每个5rpx，所以每张图片宽度是220rpx。接下来就是上代码：

// wxml
<view class='page'>
  <view class='item' wx:for='111111111111111111'>
    <view class='title'>动人！就在今天，杜兰特赛后发表了这番"让全联盟都致敬"的言论</view>
    <view class='imgs'>
      <image src='../images/durant.jpg' class='img1'></image>
      <image src='../images/harden.jpg' class='img2'></image>
      <image src='../images/gay.jpg' class='img2'></image>
    </view>
    <view class='bottom'>
      <view class='bottom-name'>NBA战报</view>
      <view class='bottom-comment'>74评</view>
    </view>
  </view>
</view>

接下来是样式文件

// wxss
.page {
  display: flex;
  flex-direction: column;
}
.item {
  margin-left: 40rpx;
  margin-right: 40rpx;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #ccc;
}
.title {
  font-size: 30rpx;
}
.imgs {
  width: 670rpx;
  display: flex;
  flex-direction: row;
  margin-top: 20rpx;
}
.img1 {
  width: 220rpx;
  height: 150rpx;
}
.img2 {
  width: 220rpx;
  height: 150rpx;
  margin-left: 5rpx;
}
.bottom {
  display: flex;
  flex-direction: row;
  margin-top: 15rpx;
}
.bottom-name {
  font-size: 25rpx;
  color: #ccc;
}
.bottom-comment {
  font-size: 25rpx;
  color: #ccc;
  margin-left: 20rpx;
}

然后我们在开发工具中切换不同设备查看界面是否有变形，最终所有设备显示一致。

尾巴

本文内容较短，核心知识点就是rpx这个单位尺寸，掌握这个知识点能让你再适配中得心应手。如果文中有什么错误，欢迎拍砖指正。
ps：有没有喜欢看NBA的兄弟，你觉得今年的总冠军会花落谁家了，欢迎留言，期待章鱼帝的出现。