物理像素、逻辑像素、设备像素比、屏幕像素密度

1.物理像素DP（设备像素）

• 物理像素代表屏幕上有多少个点，比如1080x2340表示屏幕水平方向一排有1080个物理像素点，垂直方向一排有2340个物理像素点。
• 任何设备的物理像素的数量是固定的,即一个设备的分辨率是固定的,且任何一款设备上1物理像素的大小是不会改变的(单位pt)。
• 不同设备上1物理像素的大小可能是不一样的。

2 .逻辑像素DIP（设备独立像素）

• 逻辑像素与css像素一样是一种虚拟的像素，也就是说css像素是逻辑像素的一种。它是操作系统定义的一种像素单位，应用程序将设备像素比告诉操作系统，操作系统再将独立设备像素转为设备像素。除此，平时描述一张图片宽高时一般用 200px * 100px，这里的px也是逻辑像素。
• 可以通过window.screen.width/ window.screen.height查看
• 仅需要物理像素难道不够吗？为什么要有逻辑像素呢？因为物理像素仅代表像素点的个数，并没有有规定一个点实际的尺寸是多少。假设有一个按钮，宽度用100个物理像素表示，因屏幕物理像素排列方式和密度的差异，不同屏幕上实际的视觉宽度必然不一样。而逻辑像素相同就表示希望按钮在不同屏幕上看起来一样大。

3.css像素

• css像素是浏览器中持有的概念，用来精确网页上的内容，css像素是逻辑像素的一种。
• 由于不同的物理设备的物理像素的大小是不一样的，所以css认为浏览器应该对css中的像素进行调节，使得浏览器中 1css像素的大小在不同物理设备上看上去大小总是差不多 ，目的是为了保证阅读体验一致。为了达到这一点浏览器可以直接按照设备的物理像素大小进行换算，而css规范中使用“参考像素”来进行换算。
• 一个width为200px的元素，它占据了200个css像素，但200个css像素占据多少个物理像素取决于屏幕的特性（是否高密度，即像素比）和用户缩放行为。

       a.用户缩放行为

在一般情况下（页面缩放比为1），1个CSS像素 等于 1个物理像素。当页面缩放比不为1时，CSS像素和物理像素不再对应。如果放大页面，一个CSS像素所占的物理像素变多，那么屏幕范围的CSS像素变少。如果缩小页面，一个CSS像素所占的物理像素变少，那么屏幕范围的CSS像素变多

假设我们用PC浏览器打开一个页面，浏览器此时的宽度为800px，页面上同时有一个400px宽的块级元素容器。很明显此时块状容器应该占页面的一半。但如果我们把页面放大（通过“Ctrl键”加上“+号键”），放大为200%，也就是原来的两倍。此时块状容器则横向占满了整个浏览器。吊诡的是此时我们既没有调整浏览器窗口大小，也没有改变块状元素的css宽度，但是它看上去却变大了一倍——这是因为我们把CSS像素放大为了原来的两倍，也就是说默认情况下一个CSS像素应该是等于一个物理像素的宽度的，但是浏览器的放大操作让一个CSS像素等于了两个设备像素宽度。。由此可见css像素的相对性

        b.屏幕的特性

在普通屏幕（pc端）下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，在不增加显示器宽高的情况下，使用2个或更多物理像素来显示1个CSS像素就可以更清晰，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点。

 

• 一个逻辑像素里可能包含1个或者多个物理像素点，包含的越多则屏幕看起来越清晰

4.设备像素比DRP

• 设备像素比（dpr 描述的是未缩放状态下，物理像素和CSS像素的初始比例关系
• 设备像素比（dpr）=物理像素(dp) / 设备独立像素(dip)
• 设备像素比(dpr) 是指在移动开发中1个css像素占用多少设备像素，如2代表1个css像素用2x2个设备像素来绘制。当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为2:1时，使用4个设备像素显示1个CSS像素，当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。

5.屏幕像素密度PPI

• 屏幕像素密度(ppi)=对角线分辨率 / 对角线尺寸。
• 屏幕像素密度(ppi)是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算。
• 屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。

• 举例

 

 

var 斜边尺寸 = V(1920^2+1080^2) V代表开根号 
var ppi = 斜边尺寸/5.5 
ppi = 401ppi

• ppi用作显示设备的工业标准，设备像素比与ppi相关，一般是ppi/160的整数倍。