微信小程序开发——从px到rpx

开发--从px到rpx：

我一直在想，我是否有必要再写一次这一部分，或者给你提供一些阅读链接。

因为单位的定义相对官方。没有什么可讨论的。让我在这里做一个总结和简单的解释。

首先，本文仅以移动设备为例。

摘要：如果设计师使用iphone6 6作为标准来制作设计草案，1rpx=0.5px=1物理像素。Photoshop中测量的尺寸是物理像素。因此，您可以直接使用维度数据。

--------------------------------------如果你理解了本文的摘要，你不需要阅读以下内容-------------------------------------

[英寸]英寸表示屏幕的对角线长度。如下图所示：

[像素]像素是图像的基本采样单位。它不是一个特定的物理量，因为像素的物理大小是不确定的。如图所示：

[分辨率]分辨率是屏幕像素数。通常，屏幕宽度的像素乘以屏幕高度的像素。例如，iPhone 6的分辨率为750*1334

分辨率也分为[物理分辨率]和[逻辑分辨率]。值得注意的是，物理分辨率通常由设计师在实际工作中给出，而逻辑分辨率在程序中使用，但两者都被称为分辨率，这很容易混淆。

[物理分辨率]是硬件支持的分辨率，[逻辑分辨率]是软件可以实现的分辨率。

物理分辨率和逻辑分辨率的商称为[像素放大率dpr]，通常称为屏幕的几倍。

如下图所示，iPhone 6的分辨率为375*667，这是指其逻辑分辨率。我们上面提到的750*1334是它的物理分辨率。

所以iPhone 6的像素放大率=（750*1334）/（375*667）=2

在理解了以上概念之后，我们可以继续看下面的单元。

[px]px是Pixel的缩写，指像素。作为图像采样的基本单位，没有什么特别需要解释的。

[rem]移动适配最常用的方法是使用rem作为单位，因为rem根据html的字体大小动态计算实际px。

因此，这通常反过来使用。也就是说，您可以动态设置字体大小。以在不同分辨率下实现相同的效果。

[rpx]rpx实际上是rem的一种应用，或者说是一种设计方案。官方称，屏幕宽度为20 rem，屏幕宽度是750 rpx。

所以在微信中，1Rem=750/20rpx。

但这不是我们关注的焦点。

在使用rem时，我们经常要求设计师根据iphone 6标准起草设计。因为如果iPhone 6是标准的，并且iPhone 6的字体大小设置为62.5%。

那么1 rem等于10 px。我们可以通过将设计师标记的大小（通常是物理分辨率）除以20来获得1rem的值。

在iPhone6上，屏幕宽度为375px，总共有750个物理像素，因此750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。

css中的Px与设备的物理像素没有绝对的一对一关系。

像素与物理像素的比率与设备的dpr（像素放大率）有关。

Rpx称为相对像素值，而Rpx与物理像素并非绝对一一对应。

Wxss将设备宽度定义为750rpx，这是基于iPhone 6的分辨率（750x1334）。

也就是说，在iPhone 6上，1rpx=1物理像素=0.5px。

因为设计师标注的尺寸通常是物理分辨率。所以如果设计草案是基于iPhone 6的，我们可以直接标准化rpx而无需转换。

本课到此结束。

感谢您的阅读。

作者：第九程序官员

链接：https://www.jianshu.com/p/e8b66de2b7b5

资料来源：简树

版权归作者所有。商业复制请联系作者授权，非商业复制请注明来源。