物理像素、设备独立像素、CSS 像素

[byodian]

CSS 像素（虚拟）和实际的屏幕物理像素之间的关系

• Physical Pixels
• Device Independent Pixels （Logical Pixels）
• Device Pixels Ratio
• Points

物理像素 (Physical Pixels)

设备屏幕由一个个的物理像素点组成，一个点（pt）等于 1/72 英寸。平时，手机或电脑的分辨率表示的就是设备的物理像素，比如 iPhone6P/6sP/7P 的屏幕分辨率为 1080 x 1920 。

1pt = 1/72 inches

设备独立像素 (Device Independent Pixels)

设备独立像素，又叫逻辑像素（logical Pixels）或虚拟像素，用于逻辑上衡量长度的单位，由底层系统的程序使用，会由相关系统转换为物理像素。CSS 像素是设备独立像素的一种。

参考

• DPI and Device-Independent Pixels
• CSS PIXEL RATIO
• Understanding pixels and other CSS units
• 什么叫物理像素值，什么叫设备独立像素值（dips）?
• 掌握 web 开发基础系列 -- 物理像素、逻辑像素、css 像素
• CSS 像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
• viewport
• DPI