什么是物理像素，逻辑像素和像素密度

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

---

物理像素（Physical Pixels）、逻辑像素（Logical Pixels）和像素密度（Pixel Density）是屏幕显示相关的三个关键概念：

1. 物理像素（Physical Pixels）：
   物理像素是构成电子屏幕显示的基本单元，每个物理像素由屏幕内部的一个或一组发光元件组成，它们决定了屏幕显示的最小颗粒度。在不同设备上，物理像素的大小和间距可能不同。

2. 逻辑像素（Logical Pixels）：
   逻辑像素是操作系统和浏览器用来计量屏幕尺寸和布局的基础单位，有时也称为设备独立像素（Device Independent Pixel, DIP）或CSS像素。在理想状态下，1个逻辑像素应该对应1个物理像素，但在高分辨率的屏幕上，为了保持良好的视觉效果，1个逻辑像素可能对应多个物理像素。

3. 像素密度（Pixel Density）/每英寸像素数（PPI, Pixels Per Inch）：
   像素密度是指在一个屏幕区域内，每英寸包含的物理像素数量。像素密度越高，意味着同样尺寸的屏幕上可以容纳更多的像素，从而使得图像更加细腻清晰。例如，一块屏幕的像素密度如果是300PPI，意味着在一平方英寸内分布了300个物理像素。

在移动端开发时，由于不同设备的屏幕尺寸、分辨率和像素密度差异很大，为了确保UI元素和图片在各种设备上都能正确显示且保持清晰，开发者通常会使用多种分辨率的图片资源。

• @3x 和 @2x 图片资源：
  这是在iOS和Android开发中常见的一种图片适配策略。其中，@2x表示图片的实际像素是设计原图的一倍，适用于像素密度较高的屏幕（如iPhone的Retina显示屏），即每一个逻辑像素对应两个物理像素；而@3x则表示图片的像素是设计原图的三倍，对应于像素密度更高的屏幕（如部分现代智能手机的超高清屏），一个逻辑像素对应三个物理像素。

因此，当应用运行在不同密度的屏幕上时，系统会自动加载对应的高分辨率图片资源，这样即使在高像素密度的屏幕上，也能保证图标和图片看起来清晰无锯齿，不会因物理像素不足而显得模糊。虽然这可能会增加文件大小和下载时间，但通过这种方式可以确保跨设备的用户体验一致性。