简述深入理解设备像素、CSS像素、设备独立像素、 DPR、PPI之间的区别与适配⽅案 ？
这些术语可能会让人感到困惑，但它们在移动设备的屏幕适配中非常重要。让我们逐一解释它们：
- 设备像素（Device Pixel）：也被称为物理像素，是显示设备上的最小物理单元。设备像素的数量是固定的，取决于设备的硬件。
-
CSS像素（CSS Pixel）：是浏览器使用的抽象单位。在桌面浏览器中，一个CSS像素通常等于一个设备像素，但在高分辨率的设备上，例如Retina显示屏，一个CSS像素可能等于多个设备像素。
-
设备独立像素（DIP，Device Independent Pixels）：是一种与设备无关的单位，用于保证无论在何种分辨率的屏幕上，元素都能以相同的大小显示。在Android设备上，1dip等于1物理像素，在密度为160ppi的设备上。在其他设备上，系统会进行相应的缩放。
-
设备像素比（DPR，Device Pixel Ratio）：是设备像素和CSS像素的比率。例如，如果在Retina显示屏上，一个CSS像素等于两个设备像素，那么设备像素比就是2。
-
像素密度（PPI，Pixels Per Inch）：是指每英寸的设备像素数量。PPI越高，显示的内容就越清晰。
理解了这些概念后，我们可以更好地进行移动设备的屏幕适配。适配方案通常涉及到使用媒体查询（Media Queries）来根据设备的特性（如设备像素比）来调整样式，或者使用相对单位（如em或rem）来使元素的大小能在不同设备上保持一致。此外，针对高DPR的设备，我们还可以使用srcset属性来为图片提供多个版本，以保证在高分辨率设备上图片的清晰度。