物理像素，逻辑像素，设备像素比，分辨率以及为何移动端需要适配(通俗易懂)

以下内容均为个人理解，如有问题，欢迎指正！！

 

一.概念梳理

1.物理像素：显示器或屏幕上实际存在的像素

2.逻辑像素：是虚拟的像素，一般来说，css像素和逻辑像素为1比1，类似retina屏幕暂不做考虑。

3.设备像素比：物理像素÷逻辑像素

4.分辨率：一般和物理像素一比一，例如1920×1080分辨率就意味着1920×1080个物理像素，非标准分辨率不做考虑。

二.为什么移动端需要适配？

以下举例两个机型说明：

1.Samsung Galaxy S20

• 分辨率：1080×2400
• 设备像素比：3

2.iphone12

• 分辨率：1170×2532
• 设备像素比：2

---

预备公式：

物理像素＝设备像素比×逻辑像素

前提条件：

假设有一个dom元素，我设置其宽度为css像素(一般可看做逻辑像素)100px，即：width：100px

具体计算：

1.其在sansung Galaxy s20的物理像素为100×3=300px，其在屏幕中占比为300/1080=0.2777777778，约28％

2.其在iPhone12的物理像素为100×2=200px，其在屏幕中占比为200/1170=0.1709401709，约17％。

从理论上来说，无论什么机型，那显示效果应该是等比例显示，但是上面的例子说明，一旦使用了css像素单位px，就不能做到等比例，这就是为什么要用移动端适配，以及为什么rem在移动端适配中占主流地位。