获得设备像素比(dpr)后,便可得知设备像素与CSS像素之间的比例。当这个比率为1:1时,使用1个设备像素显示1个CSS像素。当这个比率为2:1时,使用4个设备像素显示1个CSS像素,当这个比率为3:1时,使用9(3*3)个设备像素显示1个CSS像素。
所以,有如下公式:
DPR = 设备像素/CSS像素
3、DIP(Device independent Pixel)
设备独立像素,也称为逻辑像素,简称dip
。
根据上述设备像素与CSS
像素之间的关系、及DPR
的官方定义,我们可以推断出:
CSS像素 =设备独立像素 = 逻辑像素
下面,还是引用 http://www.cnblogs.com/2050/p/3877280.html 文中的内容说明:
在移动端浏览器中以及某些桌面浏览器中,window对象有一个devicePixelRatio
属性,它的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素。
CSS
像素就可以看做是设备的独立像素,所以通过devicePixelRatio
,我们可以知道该设备上一个css
像素代表多少个物理像素。例如,在Retina
屏的iphone
上,devicePixelRatio
的值为2,也就是说1个css
像素相当于2个物理像素。但是要注意的是,devicePixelRato
在不同的浏览器中还存在些许的兼容性问题,所以我们现在还并不能完全信赖这个东西,具体的情况可以看下这篇文章。
为什么是“每四个一组”?而且要让这四个一组来显示“原来屏幕的一个像素”?这大概就是 Retina 显示技术的一种表现吧。而这“每四个一组”的“大像素”,可以被称作“设备独立像素”,device independent pixel
,或者 density-independentpixel
,它可以是系统中的一个点,这个点代表一个可以由程序使用的虚拟像素,然后由相关系统转换为物理像素。
“设备独立像素”也有人称为“CSS像素”,一种形象的说法,更倾向于表明与 CSS
中尺寸的对应。
设备独立像素与物理像素的对应关系,可以这样看:
类似的每四个一组的对应关系,也许正是 Retina
显示技术所做的。
4、DPR(device pixels ratio)
4.1 定义
设备像素比(dpr 描述的是未缩放状态下,
物理像素
和CSS像素
的初始比例关系,计算方法如下图。
4.2 理解
设备像素比(dpr) 是指在移动开发中1个css像素占用多少设备像素,如2代表1个css像素用2x2个设备像素来绘制。
设备像素比(dpr),公式为1px = (dpr)^2 * 1dp
,可以理解为1px由多少个设备像素组成;
5、PPI(pixels per inch)
5.1 定义
每英寸像素取值,更确切的说法应该是像素密度,也就是衡量单位物理面积内拥有像素值的情况。
5.2 ppi是如何计算出来的呢?
顾名思义,每英寸的像素点(设备像素),已知屏幕分辨率和主对角线的尺寸,则ppi
等于
以爱疯6为例:
我们知道,ppi越高,每英寸像素点越多,图像越清晰;我们可以类比物体的密度,密度越大,单位体积的质量就越大,ppi越高,单位面积的像素越多。
5.3 ppi和dpr到底什么关系?
毕竟这些参数是外国人先发明的,他们会优先选择自己熟悉的计量单位作为显示设备的工厂标准参数,因此ppi
就用作显示设备的工业标准;
告诉业界人士,ppi
达到多少是高清屏,此时对应的dpr是多少,而不直接告诉你我现在的显示设备dpr
是多少,毕竟人们直接听到像素分辨率会更加有反应。
设备像素比与ppi相关,一般是ppi/160的整数倍:
6、倍率与逻辑像素
6.1 基本关系