移动端知识总结

单位英寸像素数（Pixel Per Inch，PPI）：现实世界的一英寸内像素数，决定了屏幕的显示质量

设备像素比率（Device Pixel Ratio，DPR）：物理像素与逻辑像素（px）的对应关系

分辨率（Resolution）：屏幕区域的宽高所占像素数 用户屏幕有多少个物理像素（可以发光的点）。

 

物理像素(physical pixel)

一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。

设备独立像素(density-independent pixel)

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。

所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。

设备像素比(device pixel ratio )

设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：

设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向

 

设备像素/css像素

要先说下分辨率（Resolution），它就是指屏幕区域的宽高所占的像素数。分辨率说全了就是设备的分辨率，这两个是一回事。这个分辨率是指每英寸的面积上可产生的像素点，分辨率越高代表可以将画面显示的更精细（有时候获取的显示器分辨率，其实是指桌面设定的分辨率，而不是显示器的物理分辨率。大多数情况下，我们设置的分辨率与物理分辨率一致，显示效果才最佳）。

其实这里说的分辨率（Resolution）在绝大多数的情况下跟我们题目上的设备像素是一个东西，名字的不同而已。

　　好，下面就专心说设备像素/css像素。

　　1.我们姑且认定设备的pixels为正确（标准）的pixels宽度。这些pixels决定了你工作所用的那些设备上正式的分辨率。在大多数情况下，能够从screen.width/height上取出具体值；

　　2.现代浏览器上的缩放，是基于“伸展”pixels。结果是，html元素上的宽度并没有因为缩放200%而由128pix变成256px，而是真实的pixels的被计算成了双倍。html元素在形式上依然是128CSS的pixels，即便它占用了256设备的pixels；

 

「像素」(Points) 就是所谓的「逻辑像素」(等同于设备像素)。在 iPhone 4 前的时代，逻辑像素和物理像素是一一对应的——即，设计中的一个点对应屏幕硬件上的一个像素点。而 iPhone 4 之后，Retina 屏幕出现。在 Retina 屏幕上，使用 4 个硬件上的像素点 (2 x 2) 来表示一个逻辑像素点。举个例子——

• 在开发环境中，使用 12 pt 的字体，在非 Retina 屏幕上字面高度为 12 个物理像素点；而同样是 12 pt 的字体，在 Retina (@2x) 屏幕上的字面高度，是 24 个像素点。
• 同样，使用代码来生成的一个 20 pt x 30 pt 尺寸的举行，在非 Retina 屏幕中尺寸为 20 x 30 个物理像素；而在 Retina (@2x) 屏幕上，其尺寸为 40 x 60 个物理像素。