1.逻辑像素与设备像素的关系
设备像素好理解，例如一台iPhone的参数，分辨率是2532px * 1170px，也就是它的屏幕上每行有1170个像素，每列有2532个像素。
逻辑像素则可以被理解为屏幕上固定大小的一块区域，这个区域里放着像素。 可以理解，同样大小的区域，放的像素越多，像素密度（PPI）也就越大。实际上，逻辑像素和设备像素是有数量关系的，1逻辑像素=1或2^2或3^2设备像素，这种关系就用DPR表示。 我们可以看到，几乎同样大小的iPhone 12 pro和iPhone SE，它们的逻辑像素应该相差不大，但由于屏幕密度的差别，使得iPhone 12 pro的分辨率要比iPhone SE大不少。
| iPhone 12 pro | iPhone SE | |
|---|---|---|
| 屏幕 | 6.1英寸 | 4.7英寸 |
| 分辨率 | 2532px * 1170px | 1334px * 750px |
| 屏幕密度 | 460ppi | 326ppi |
2.逻辑像素与图片尺寸的关系
我们所看到的图片参数的px，其实是逻辑像素。
下面我们来验证一下： 我在html中放入了一张257px * 257px的图片，先来预测一下它在iPhone 12 pro中的展示效果。是这样吗？
实际上会是这样的：它占据了屏幕近2/3。
同时，上图的调试工具也告诉了我们，iPhone 12 pro的逻辑像素是390 × 844，那么结合其分辨率，得到DPR为3（390 * 3=1179，844 * 3=2532）。
因此，图片的像素对应着设备的逻辑像素。
3.前端开发处理
上述稍稍令人迷惑的结果，使得我们在开发中注意些什么？
当图片的一个逻辑像素放到设备中的逻辑像素，并被拆成多个设备像素时，会发生什么？————设备像素不能够很好地取色，导致图片在高像素密度的设备中反而更模糊了。
那怎么帮助设备像素获取我们想要的颜色呢？————倍图。其实@2x图就是把图片的一个逻辑像素在图片处理软件上切分成了4个尺寸更小的逻辑像素，使之与设备像素直接1对1地匹配起来。也就是图片的尺寸不变，只是变得更细腻了。
最后，为不同DPR的设备匹配不同的图片，我们可能需要这样操作：
<img srcset="elva-fairy-320w.jpg,
elva-fairy-480w.jpg 1.5x,
elva-fairy-640w.jpg 2x"
src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
或者
.img{
background-image: image-set( "foo.png" 1x, "foo-2x.png" 2x);
}
或者
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
/* High density stuff here */
}
