微信小程序____屏幕适配 解析

---

引言

之前在做小程序项目时，就遇到了一些小困惑。

贴上代码：

wx.getSystemInfo({
  success: function (res) {
    windowWidth = res.windowWidth;
    windowHeigth= res.windowHeight;
    px2rpx = 750 / windowWidth;
  }
})

小程序 如何解决 屏幕适配的问题的

我们都知道，小程序是一个跨系统的平台。这就意味着，小程序会在不同的设备上运行，但不同设备的分辨率会有差异。在小程序中，如何在分辨率不同的设备上保证视觉元素的正常显示？这就需要名为 rpx 的动态尺寸单位。

下面为大家来作小程序rpx单位全解析，希望能够帮助你解决有关 rpx 的一切疑问。为什么需要动态单位和 rpx？

在显示屏上，每一个画面都是由无数的点阵形成的。这个点阵中，每一个点叫做像素，就是 pixel（缩写为 px）。上面的那句话，对于很多人来说都是常识。但是，随着 Retina 屏幕（即「视网膜屏」）的推出和高分屏的普及，1 px 所能代表的实际长度并非是一成不变的。对于跨平台、跨设备的应用来说，单纯使用 px 并不能满足需要。因为，这很难保证小程序的元素，能在不同设备上正常显示——同样 px 尺寸的元素，在高分屏上显示会明显要比在低分屏显得更小。因此，我们需要一个动态的长度单位。这个单位通过对不同屏幕的分辨率进行调整和适配，保证相同元素在不同屏幕上的展示是正常的。

苹果和 Google 对此都有相应的措施：

• 由于苹果对高分屏的优化良好，所以在 iOS 上，代码中的 1 px 所代表的实际像素数会根据不同设备动态调整，开发者不需要进行二次换算。

• 由于 Android 设备碎片化严重，Google 不得不建立了一个新的名叫「density-independent pixel（密度无关像素，缩写为 dp）」的尺寸单位，以适应不同分辨率屏幕的尺寸换算。

微信也为小程序提供了一个动态单位解决方案：它就是 responsive pixel（动态像素），简称 rpx。Pixel 与 rpx、dp 如何换算呢？了解动态单位是怎么来的以后，我们下一步就该学习如何在 px 和 rpx、dp 之间进行换算了。

动态单位dp与px换算的基本概念是：**选择一个分辨率作为基准，在基准分辨率中，一个像素点显示有多长，在其他屏幕上会显示同样长度。例如，dp 与 px 换算公式是：dp = px * (目标设备 dpi 分辨率 / 160)。

但微信小程序的 rpx 换算方式，会与其他动态单位的换算方法有些出入。微信官方提供的换算方式更「傻瓜」一些：rpx = px * (目标设备宽 px 值 / 750)。举个例子：

• 目标设备的宽度如果是 375px，按照 750rpx 进行换算，则等于 1rpx = 0.5px
• 目标设备的宽度如果是 1125px，换算后 1rpx = 1.5px

想想是不是有些不太对劲？没错，如果将微信小程序放到平板电脑上运行，屏幕的宽度 px 值有可能会变化（横竖屏、分屏模式等等）。这时候，再以宽度为基准，就会出现元素显示不正确的问题。从这一点可以看出，微信团队目前并不希望将小程序扩展到手机以外的设备中。因此，开发者暂时可以专注于提高小程序在手机上的体验，无需担心多尺寸屏幕带来的适配问题。那能不能直接让 rpx 和 dp 进行互换呢？

当然不能！dp 是以屏幕分辨率为基准的动态单位，而 rpx 是以长度为基准的动态单位。就像「米」和「平方厘米」不能互换一样，dp 和 rpx 两者也是不能直接进行互换的，除非微信官方将 rpx设定为分辨率基准而非长度基准。设计师该怎么做？由于微信使用了 rpx 动态单位，设计稿的尺寸单位也推荐使用 rpx。那么问题来了，如果要改用 rpx 单位，以什么尺寸的屏幕作为设计稿标准会比较合适呢？在微信官方的文档中，我们看到这样一句话：

在 iPhone 6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。开发微信小程序时设计师可以用 iPhone 6 作为视觉稿的标准。也就是说，设计师在设计小程序时，可以这样做：

• 直接以 iPhone 6 的屏幕尺寸（375×667）用作视觉稿尺寸，1 px = 2 rpx；
• 以 1 px = 1 rpx 的标准，将设计稿尺寸设定为 750×1334。

其实，到这里为止，已经讲解完，感觉也太简单了！！！

茶余饭后

---

现在我真有些后悔，在之前的项目中使用各种运算出来的px值直接套开发页面上的尺寸，费时费力不说，样式还是会有些小瑕疵。

自定义规则

其实做小程序的前端开发，最简便、最实在的途径应该是以屏幕尺寸（375×667）用作视觉稿尺寸，UI设计师设计布局，直接使用rpx值即可很好的自适应了~

新建图层尺寸为375px×667px,所有尺寸按照px为计量单位。填写单位换算标准：1 px = 2 rpx。控件尺寸按照WeUI 前端样式库中的标准来。

在将设计稿转交给程序员之前，设计师需要清楚地描述设计稿尺寸和单位换算标准等，以便程序员快速实现界面效果。如果想让你的小程序，在不同尺寸的机型上都能够完美显示，那就好好消化这篇文章吧。