前言

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

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

小程序适配

众所周知，小程序是以微信移动客户端为载体跑在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(像素)不是同一个概念。而小程序中为了做屏幕适配，推荐用rpx作为小程序中的尺寸单位，而且规定了所有的屏幕宽度都是750rpx\color{red}{推荐用rpx作为小程序中的尺寸单位，而且规定了所有的屏幕宽度都是750rpx}推荐用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的兄弟，你觉得今年的总冠军会花落谁家了，欢迎留言，期待章鱼帝的出现。

微信小程序布局技巧（三）相关推荐

微信小程序把玩（三十五）Video API
原文:微信小程序把玩(三十五)Video API 电脑端不能测试拍摄功能只能测试选择视频功能,好像只支持mp4格式,值得注意的是成功之后返回的临时文件路径是个列表tempFilePaths而不是tem ...
黯然微信小程序杂记（三）：微信小程序实现倒计时功能附讲解教学附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能附超详细注释附源码一.功能描述二.界面展示三.test.wxml代码四.test.js代码(注释很详细很易懂) CSDN私信我,有关微信 ...
微信小程序把玩（三十二）Image API
原文:微信小程序把玩(三十二)Image API 选择图片时可设置图片是否是原图,图片来源.这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用主要方法: wx. ...
微信小程序把玩（三十三）Record API
微信小程序把玩(三十三)Record API 原文:微信小程序把玩(三十三)Record API 其实这个API也挺奇葩的,录音结束后success不走,complete不走,fail也不走, 不知道 ...
微信小程序学习（三）：在微信开发者工具中，使用WeUI前端美化框架，微信小程序
微信小程序学习(三):在微信开发者工具中,使用WeUI 这里就是将WeUI导入到微信开发者工具中,我并没有使用多少样式,这里只是展示了一下怎么引用网上有很多的方法,我绝大多数都没看懂,这里就是最简单 ...
微信小程序开发的三种模式
摘要:截止到2018年6月底,正式上线发布的微信小程序已超过100万个.而越来越多的公司也已经在做微信小程序开发,许多人会觉得"微信小程序开发是开发者们的专利".答案是否定的,今天 ...
微信小程序推广技巧、营销方案
微信小程序推广技巧.营销方案小程序已经成功上线了!那么,小程序线下如何推广?线下门店如何玩转小程序呢? 1.附近的小程序,让商家曝光率更高小程序自带"附近的小程序"功能,利用 ...
微信小程序开发（三)——IE盒子，Flex弹性布局，色子六面
目录 ie盒子模型 Flex弹性布局三大特性: 块元素和内联元素的转换 background-image背景图片尺寸单位rpx 定位练习:色子的六面 ie盒子模型盒子模型是css中一个重要的概 ...
微信小程序布局快速入门
前言本文是作者在学习微信小程序时为掌握页面布局而参考多种资料整理而成,希望能帮助大家在开发的过程中快速上手. 一.盒子模型每个元素都会生成一个矩形框,每个元素框中心都有一个内容区(content) ...

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