分辨率,ppi,dpi,dip,dpr,物理像素,逻辑像素的区别

(一)分辨率
分辨率指的是显示器的分辨率,显示器出厂时已经固定。例如:1920*1080。
(二)PPI
ppi (pixels per inch):图像分辨率 (在图像中,每英寸所包含的像素数目)。
(三)DPI
dpi (dots per inch):在电子中指每英寸所包含的像素数目,等于ppi。

举个例子:显示器1920*1080,显示器为24寸,物理dpi就是

分辨率1.jpg

(四)物理像素

设备像素(又称为物理像素): 指设备能控制显示的最小物理单位,意指显示器上一个个的点。从屏幕在工厂生产出的那天起,它上面设备像素点就固定不变了。例如显示器分辨率为1920*1080,它的物理像素就是1920*1080。

(五)DIP

DIP:DIP是指Density Independent Pixels,可以翻译为密度无关像素,是一个计量单位,简称dp。

在安卓中:根据规定,一个dp相当于160dpi屏幕中的一个px。在320dpi的屏幕中,一个dp相当于2个px。
为了适配不同android设备的屏幕尺寸,Android对屏幕密度做了重新的规定,将密度与分辨率绑定起来。具体而言,当屏幕的的分辨率为320x480时,无论实际的物理尺寸大小,密度都会被设置为160dpi,也就意味着这个设备上,一行最多可以放置320dp,此时1dp=1px。而对于480x800的设备,只需屏幕尺寸在3寸到4.3寸之间,密度都会被设置为240dpi,一行同样可以放置320dp,此时1dp=1.5px。因此在开发中,用dp作为单位,只需要设置一次,就可以适配到多个屏幕上。

公式:
1dp= dpi/160 px

windows系统也是如此,windows dpi默认为96,当调节win7 dpi时,如果调大dpi,字体会变大,实际调的是类似于安卓dpi,并不是调节物理dpi,物理dpi出厂就固定了。

(六)逻辑像素

设备独立像素(逻辑像素):可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),这个点是没有固定下小的,越小越清晰,然后由相关系统转换为物理像素。

逻辑像素和密度无关,是浏览器所能感知的像素密度。浏览器对逻辑像素进行操作,然后系统将逻辑像素按比例反应到物理像素上。

css像素(也叫虚拟像素):指的是 CSS 样式代码中使用的逻辑像素,在 CSS 规范中,长度单位可以分为两类,绝对(absolute)单位以及相对(relative)单位。px 是一个相对单位,相对的是设备像素(device pixel)。在DPR=2中css使用的逻辑像素=设备像素/DPR。

(七)DPR
DPR也叫设备像素比(Device Pixel Ratio, DPR)。
DPR = width物理 / width逻辑 = height物理 / height逻辑。
CSS里写个1px,屏幕给你渲染成1个实际的像素点,DPR=1。
css里写个1px,屏幕给你渲染2个或者更多实际的像素点,DPR=2或者更多。
DPR实际上是压缩像素,在原来的一个像素上所占面积上压缩多个像素。

举个例子:
iPhone 6的物理像素上面已经说了,是750*1334,那它的逻辑像素呢?我们只需在iPhone 6的Safari里打印一下screen.width和screen.height就知道了,结果是 375*667,这就是它的逻辑像素,据此很容易计算出DPR为2。当然,我们还可以直接通过window.devicePixelRatio这个值来获取DPR,打印结果是2,符合我们的预期。