什么是物理像素与逻辑像素？

如果理解物理像素与逻辑像素的关系？

物理像素

​ 指的是设备的实际像素，这个主要由设备自身的硬件所决定，因此同一类型的设备物理像素是固定的。

逻辑像素（DPI）

​ 逻辑像素是相对于物理像素之后提出的一个概念，也被称为设备独立像素（Device Independent Pixel）

​ 我们在css中设置的1px就等于一个设备独立像素

设备像素比（Device Pixel Ratio，DPR）

​ 1,DPR = 物理像素 / 逻辑像素；

​ 2,例如DPR = 2,也就相当于一个逻辑像素实际上由四个物理像素组成；

​ 3,以iPhone6手机为例，iPhone6的物理像素为1334 x 750 像素，而逻辑像素只有667 x 375 像素；

​ 4,DPR值，厂商在设备出厂时就已经进行设置，并且禁止用户进行更改。

逻辑像素出现的原因

​ 1，随着科技的发展，设备所能达到的物理像素只会不断提高

​ 2，就以iPhone12为例,它的物理像素可以达到2532 x 1170 像素，这相较于一般电脑也毫不逊色

​ 3，但这并不代表它就可以按照实际的物理像素来设置css尺寸，原因主要为以下两点：

人机尺寸的限制

1.手机只能这么大

​ 手机作为移动设备，有属于它自己的设计定位，

​ 这也决定着它必须依据人手的尺寸进行人机工程设计

​ 这就决定了它的实际设备尺寸上限

2.内容的显示不能特别小

​ 人所能接受的最小字体尺寸是一定的

​ 以DPR= 2的手机为例，如果厂商不进行dpr的设置，同样将css的字体大下设置为12px

​ 在手机上显示的字体其实只有12px的四分之一大小，这对使用者来说无疑是一种折磨。