物理像素、逻辑像素、百分比适配

日常开发中，接触到最多的屏幕相关的单位，分别是物理像素（px），逻辑像素（dp, point）。

那物理像素和逻辑像素的区别是？

这里以一张 3x4px 的图片举例。假设该图片放置在 5x6px 的设屏幕中。如下图所示。

继续我们的例子，如果该屏幕想要保证图片能跟前面的低分辨率的设备显示效果一致的话，则图片的宽高应增加1倍的大小。即设备需要2倍的像素比例dpr（device percent ratio）。这样图片3*4逻辑像素的尺寸的图片在高分辨率设备中可以映射成6*8物理像素，而在低分辨率的设备（像素比例时1的设备），则3*4逻辑像素的图片映射为3*4物理像素的图片。

这是逻辑像素的大致机制。逻辑像素会根据目标设备的分辨率和尺寸计算出设备的缩放比例。逻辑像素出现是为了让不同分辨率的设备中显示相同的内容能取得大致相同的效果，当然逻辑像素并不是这样简单的百分比换算。

在Android中这个逻辑像素是dp，而ios中则是pt。在android中dp的换算公式中具体换算公式想了解的可以点击下面链接了解。
betterprogramming.pub/cracking-an…

在Android开发中将不同分辨率设备的中的物理像素比率进行如下分类。所以假设设备是230dpi的话也以hdpi的1.5倍进行换算。所以这跟百分比的换算是不太一样的。以“微信”应用举例。

底部的Tab（微信、通讯录、发现，我），假设设计图中屏幕的宽度是375dp，根据tab均分，单个tab为93.75。你如果通过水平布局指定宽度为93.75逻辑像素的话则会发现出来的效果在某些手机上并不是均分的。

如下图类似微信界面运行在Iphone 14 pro。此时应该用百分比进行适配，即在不同的分辨率中基于设计图的尺寸进行等比例换算。如：设计图的分辨率为375*812，而显示设备的分辨率为1080*1920，则设计图上1像素相当于目标设备1 ✖️ “显示设备基于设计图的比例（1080/375=2.88）”像素，即 1✖️2.88=2.88像素。这就是百分比适配。对比下图可以发现逻辑像素适配的“我”是偏左的。

百分比适配是一种根据设计图的尺寸和设备的分辨率，以百分比的方式进行换算和适配的方法。通过计算设计图上的像素与目标设备分辨率的比例，可以得到百分比像素的值，从而实现在不同分辨率的设备上保持一致的布局和显示效果。

但是百分比并不是万能的。如下图逻辑像素适配和百分比像素适配的对比。在列表中，百分比布局则会出现一个问题。你会发现在大尺寸高分辨率的设备中，列表中的每一项都特别大。则如果用逻辑像素（dp、pt）则是这样。使用逻辑像素能充分发挥大屏的优势，屏幕越大显示的内容更多。

什么时候应该用逻辑像素，百分比像素。

具体什么时候应该用逻辑像素和百分比像素适配，取决于设计图UI。根据不同设计意图决定何种方案。大部分情况下使用逻辑像素不会出现什么问题，列表item必定使用逻辑像素。但是什么时候应该用百分比像素呢？

举个例子：

ps: 例子中我会以百分比像素表示将设计图像素根据不同分辨率设备等比例换算的像素。即1百分比像素= 1✖️ [（设计图分辨率）/ （目标设备分辨率）]。

下面是一个“购买成功”的UI图。中间有个票根信息。票根信息有个票根背景图片。

标注图中的屏幕分辨率为 393*852

这里票根信息UI应该用逻辑像素还是百分比像素适配呢？

通过标注图能明显看出票根信息在宽度上固定需要占用一定比例。所以这里宽度应该为 353百分比像素 。为了宽高比例正确，故高度也应为 346百分比像素 。注意这里高度的 346百分比像素 也应该是基于屏幕宽度 393 的百分比像素。即 目标设备屏幕宽度 * 346 / 393

因为整个票根的宽高都为百分比适配，则里面子部件的摆放、间距都应按照百分比的方式进行适配。不然则会出现子部件没法像标注图那样正确对齐的情况。

总结

物理像素（px）是屏幕上的实际物理点，表示屏幕上显示内容的最小单位。逻辑像素（dp、pt）是开发中使用的抽象单位，与物理像素的关系由设备的像素密度决定。

逻辑像素是开发中使用的抽象单位，它们与物理像素之间有一个映射关系。在不同的设备上，逻辑像素的布局和大小是相对统一的。使用逻辑像素可以让开发者在不同分辨率的设备上保持一致的布局和显示效果。

百分比适配是一种根据设计图的尺寸和设备的分辨率，以百分比的方式进行换算和适配的方法。通过计算设计图上的像素与目标设备分辨率的比例，可以得到百分比像素的值，从而实现在不同分辨率的设备上保持一致的布局和显示效果。

一般情况下，使用逻辑像素可以保持在不同设备上显示内容的一致性和最佳效果，特别是在涉及列表和大屏幕显示的情况下，需要根据设计图，决定使用何种方案。可以通过先分析使用逻辑像素思考是否合理，再考虑百分比适配的情况。在一些特定的设计需求下，如背景图片的铺满屏幕、比例布局等，可以考虑使用百分比适配来实现更精确的布局和显示效果。