是什么

• css像素：抽象单位（代码中的单位）
• 设备像素：实际最小物理单位（机器对应的单位）
• 设备独立像素：抽象单位，包含了css像素
• dpr: 设备像素/设备独立像素
• ppi: 每英寸像素，表示每英寸所包含的像素点数目，值越大，图像越清晰

怎么用

css像素

web编程中使用到的逻辑单位，如1px，5px等

• px会受到下面的因素影响而变化
  • 每英寸像素ppi
  • 设备像素比 dpr

设备像素

设备能控制控制的最小物理单元

dpr

获取方式:window.devicePixelRatio

当设备像素比为1:1时，使用1（1×1）个设备像素显示1个CSS像素

当设备像素比为2:1时，使用4（2×2）个设备像素显示1个CSS像素

当设备像素比为3:1时，使用9（3×3）个设备像素显示1个CSS像素

ppi

原理

FAQ