我是 HullQin，公众号 线下团聚游戏 的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢～我有空了会分享做游戏的相干技术。
背景
最近写了 3 篇对于微信大字号的文章：
- 《在微信大字号模式下，网页款式乱了怎么办？》提供了一种解决方案，在用户调整微信字体大小后，能够保障网页字体大小不变，解决了款式错乱的问题。
- 《让你的网页，适配微信大字号模式！体验超好，快来珍藏》介绍了几种计划，助你的网页适配微信的大字号。
- 《微信设置大字号后，iOS 加载网页时闪动怎么办？》介绍了计划，解决 iOS 大字号模式下首屏闪动的问题。
说到大字号，我就想到了经典的面试问题：请你谈谈小程序中 px 和 rpx 的区别。
时过境迁，rpx弊病也逐步裸露进去，不再被举荐应用。
前段时间，我做过一次需要，UI 设计同学要求把小程序代码中所有的
rpx转换为px（过后我写了个脚本，主动把代码中所有的rpx单位转换为px）。
重新认识 rpx 和 px
家喻户晓，rpx 是绝对单位，px 是相对单位。
- 用 px 定义的「尺寸、间隔」是固定的，不受屏幕宽度影响。
- rpx 定义的「尺寸、间隔」，受视图宽度影响，比例是 1rpx=1/750vw。
有人说，小程序内全都应该用 rpx。也有人说，小程序内全都应该应用 px。
剖析
先不争执，因为这齐全取决于产品诉求。咱们剖析下两者在微信浏览器中放大字号的结果：
| 计划 | 长处 | 毛病 |
|---|---|---|
| 全用 rpx | 页面宽度变动，画面比例放弃不变；开发成本低 | 在屏幕较大的设施（比方 iPad），空隙会占有大多数空间，导致页面空间没有充分利用，给人空洞感 |
| 全用 px | 页面宽度变动，空隙不变，一屏展现的内容更多，空间利用率高 | 画面比例变了；开发者需关注响应式布局 |
这取决于产品诉求，在大屏幕上，是冀望画面比例不变？还是空间充分利用？
iPad 应用 rpx 的体验
在 iPad 上应用体验真的不难受，咱们并不不须要那么大的字号（如果有须要，本人去设置调整大字号就好了）。
iPad 应用 px 的体验
这个页面不是小程序，然而它的成果跟小程序应用 px 的成果是一样的。
大多数的产品诉求
我想 90% 以上的产品诉求，都冀望空间充分利用：大屏幕应该展现更多的内容，而不是让小屏幕上的内容成比例放大。
剩下的可能是视频播放器、游戏类等，须要所有容器尺寸放弃固定比例的。
也就是说，咱们应该尽量用px，而非rpx。
为什么以后大多数小程序仍然应用 rpx
咱们能够看到，现在还是有很多小程序应用了 rpx。
- 前几年小程序官网竭力推广原创的 CSS 单位
rpx，小程序开发者都认为rpx是最佳实际。随后大家代码写完，部署上线，就不再批改了。 - ROI 起因。应用 iPad 看小程序的用户还是占多数，很多人认为这部分用户能用就行，没必要花更多精力去为他们适配新的一套响应式 UI 了。而且，应用 rpx 的确是省心的计划，齐全不必放心响应式问题，开发效率高。
然而现在，小程序官网也意识到了这个问题，不再强烈推荐 rpx 了，还给出了一套大屏适配倡议：
我认为写的不错，举荐大家浏览：《小程序大屏适配指南》。
写在最初
极致用户体验 ，须要设计、前端共同努力。须要设计斗争，同时设置一些 可变的间隔 、一些 固定的间隔，保障设计上能适配各种宽度。须要前端致力调试，应用 flex 技术或百分比宽度，使得网页在各种宽度下的款式都合乎预期。
我是 HullQin，公众号 线下团聚游戏 的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢～我有空了会分享做游戏的相干技术。