三种像素

物理像素（也称设备像素）

• device pixel，简称 dp

• 是一个最小显示单位

  • 出厂时就固定在设备上
  • 可以配合屏幕尺寸，算出 PPI（pixel per inch 每英寸像素量）
    • 先用勾股定理算出斜线上的像素值
    • 再除以屏幕尺寸（斜线）即得到 PPI

css 像素

• CSS pixels，简称 px

• 是一个抽象单位

  • 并不实际代表一个物理像素点
  • 不同设备的 屏幕物理像素密度 有高有低，为了在这些不同级别的屏幕上也能显示差不多的大小，同时方便代码开发，需要做如下处理：
    • 如果屏幕低级，就一个像素真的当一个使用
    • 如果屏幕高级，同样大小上承载了更多的物理像素，那就把多个像素当成一个用
      • 4 像素合 1（宽 720 的物理像素 对应 宽 360 的 css 像素，比例为 2）
      • 9 像素合 1（宽 1080 的物理像素 对应 宽 360 的 css 像素，比例为 3）
      • 这个比例可以叫 设备像素比，简称 dpr
    • 好处
      • 开发时就不用纠结不同物理像素密度的差异，统一规定屏幕总体的 css 像素值（宽和高），把差异交给设备去解决，屏幕高级的，就自动指定高的 dpr 即可，自动进行 css 像素值到物理像素值的转化（即多合 1）

逻辑像素（也称设备独立像素）

• device independent pixel，简称 dip

• 可以简单地当成 css 像素去理解，只不过原生 app 开发并没有 css 这种说法，但也是为了保证 不同屏幕 对 同一逻辑像素值 显示大小差不多

• 而对于图片，需要做如下特殊处理

  • 由于设备像素比只能自动处理绘制的 px 值，而不能处理图片，所以需要准备不同 px 分辨率的图片
  • 高级屏幕，可以装载更多物理像素，就给更清晰的扩展图片，一般有如下两种扩展
    • 2 倍图（后缀@2x）
      • 适用于 dpr 为 2 的情况
    • 3 倍图（后缀@3x）
      • 适用于 dpr 为 3 的情况
    • 适配的过程会自动完成，只需要准备好对应后缀的图片就行