关于像素

2020-02-15

css pixel

像素(pixel, px)

图像显示的最小单元，像素的定义是和环境(设备)相关的

视网膜屏(retina display)

具备足够高像素密度而使得人体肉眼**在一定距离范围内(10-12英尺, 1英尺=2.54cm)**无法分辨单独像素点的液晶屏幕

2K、4K

2K指屏幕横向分辨率大约2000像素

4K指屏幕横向分辨率大约4000像素

每英寸点数(Dots Per Inch，DPI)

通常打印设备使用DPI

像素密度(pixel per inch, PPI)

屏幕对角线像素数除以屏幕尺寸，以Google Pixel 2XL为例，其分辨率为1440*2880像素，屏幕尺寸6英寸，那么Pixel 2XL的像素密度就等于538

$ \frac{\sqrt{{1440^2}+{2880^2}}}{6} $ = 538

设备无关像素(device independent pixel, density-independent pixel, dip, dp)

on the Android operating system a device-independent pixel is equivalent to one physical pixel on a 160 dpi screen,while the Windows Presentation Foundation specifies one device-independent pixel as equivalent to 1/96th of an inch

设备像素比(device pixel ratio, DPR)

The actual DPPX will be determined by the manufacturer of each shipping device. Device manufacturers usually choose 1.5, or 2, or other whole numbers as the DPPX value.

Google Pixel 2XL

DPR: 538 / 160 = 3.3625 ≈ 3.5

iPhone X

DPR: 458 / 163 = 2.809 ≈ 3

How to calculate device pixel ratio

物理像素(physical pixel)或者叫设备像素(device pixel)

顾名思义指显示设备物理像素点

以 Pixel 2XL 为例，其物理像素为: 1440 * 2880

逻辑像素(logical pixel)

物理像素除以设备像素比即得到逻辑像素，以Pixel 2XL为例，其逻辑像素为:

411 * 823 (1440/3.5 ≈ 411, 2880 / 3.5 ≈ 823)

CSS像素(CSS Pixel)

physical size of a single pixel at a pixel density of 96 DPI, located an arm’s length away from the viewer’s eyes

肉眼在距离显示器一臂的距离看96DPI像素密度的像素点的物理尺寸。

it generally suffices to say that when the unit px is used, the goal is to try to have the distance 96px equal about 1 inch on the screen, regardless of the actual pixel density of the screen.