在进行入门页面切割时，作为一个新手，我经常听到"两倍屏"、"DPR"、"PPI"等分辨率相关的概念，这些曾经让我感到困扰。虽然作为前端开发者不一定需要深入了解硬件方面的知识，但我认为对一些基本概念有清晰的了解能更好地与设计师合作进行页面设计。本文将带领你了解这些基本的分辨率概念。请注意，本文是从前端的角度出发，可能会略显不够严谨，还请理解。
像素
概念： 像素（Pixel）是图像的最小单位，是由计算机或数字设备上的光感元件、传感器或显示屏上的一个点来表示的。
图片像素与屏幕像素
这里需要区分图片的像素 和屏幕的像素两个概念：
- 图片的像素： 图片由许多小的图像元素（像素）组成，每个像素有特定的颜色值，通常使用红、绿、蓝（RGB）颜色模型表示。图片的分辨率以像素为单位描述，例如，分辨率为1920x1080的图片表示在水平方向有1920个像素，在垂直方向有1080个像素。
- 显示屏的像素： 显示屏也由许多小的图像元素（像素）组成，分辨率以水平和垂直像素数表示，例如，一个1920x1080的显示屏表示在水平方向有1920个像素，在垂直方向有1080个像素。显示屏的像素决定了屏幕的细节和清晰度。
这两者的关系在于，如果图片的分辨率与显示屏的分辨率匹配，那么图片可以在显示屏上以原始分辨率显示，而不会有拉伸或压缩。如果图片的分辨率高于显示屏，可能需要调整显示大小或滚动浏览。如果图片的分辨率低于显示屏，可能会在屏幕上出现模糊或失真的效果。
物理分辨率，逻辑分辨率，CSS像素
物理分辨率是指显示设备（如液晶显示器、电视机、投影仪或摄像头等）硬件本身具有的固有像素数，即屏幕上实际存在的最小图像元素数量。
高倍屏的像素数比普通屏多。问题来了，如果一张图片的像素有限，让高倍屏显示，相比于普通屏，使用相同的像素数量，但高倍屏的像素更小，显示的图像不也更小吗？这时引入了逻辑分辨率的概念。
逻辑分辨率 ：操作系统定义了一个分辨率，指定显示屏上的一个像素实际是多少物理像素的组合，这个组合也被称为CSS像素。如上图所示，左侧的一个像素是右侧四个像素的组合。
图片在显示时使用的是逻辑分辨率定义的像素，使得图片在不同屏幕上显示效果一致。
如何理解显示清晰（PPI，DPR）
我们都知道一个概念，像素越多越清晰，相机像素越多拍出来的照片细节更多。实际上，是相同区域像素越多，显示的细节越多，效果越好 ，即像素密度 PPI的概念。它描述了在一定区域内的像素数量，通常用于描述屏幕或显示器的图像质量，以每英寸的像素数（Pixels Per Inch，PPI）为单位衡量。PPI越大，屏幕显示效果越清晰锐利。
当图片
的像素密度大于显示屏时，图片的信息会被压缩，显示模糊；如果显示屏的像素密度大于图片时，图片的颜色信息会完整展示在屏幕上，显示清晰。
上图左侧显示屏分辨率更高，能够显示更多图片细节。
DPR（Device Pixel Ratio）是一个用于描述在移动设备或其他高分辨率显示设备上，物理像素与CSS像素之间关系的术语。DPR定义为：1DPR = 设备物理像素 / 设备独立像素（CSS像素）。如果设备的DPR为2，即两倍屏，显示一个CSS像素实际上会使用4个物理像素（每个方向上都是2倍），从而实现更细腻的显示效果。
在高倍屏上显示时，需要使用高清图片适配，以发挥高倍屏的高清显示效果。
总结
- 图片像素不同于显示屏像素
- 物理像素就是屏幕上的发光点，图片像素是图片中的颜色信息
- 逻辑分辨率中的像素就是CSS像素，也就是多个物理像素组成的一个CSS像素
- 屏幕显示使用的分辨率像素一般是指的是逻辑分辨率中的CSS像素
- ppi是像素密度
- dpr = 物理像素/逻辑像素
- 高倍屏因为像素的密度大，显示效果更细腻
- 开发中需要为高倍屏适配高清图片，来更好的显示