发表于: 2018-08-06 09:41:10
2 671
今日主要完成:
主要参考了https://github.com/jawil/blog/issues/21这个作者的总结,大致了解了一下什么叫做css像素,设备像素,设备独立像素,设备像素比,每英寸像素取值这些概念
————————————————————————————————————————————
收获:
1、PX(CSS pixels)
1、css有其相对性,也有其绝对性
相对:相对于devicePixelRatio,px实际显示的大小是不确定的。
绝对:相比于em,px的大小和元素的其他属性无关。
所以我们再谈论css的像素的时候,一定要清楚谈论的上下文
2、在同样一个设备上,每1个CSS像素所代表的物理像素是可以变化的(即CSS像素的第一方面的相对性);
在不同的设备之间,每1个CSS像素所代表的物理像素是可以变化的(即CSS像素的第二方面的相对性);
3、由于不同的物理设备的物理像素的大小是不一样的,所以css
认为浏览器应该对css
中的像素进行调节,使得浏览器中 1css像素的大小在不同物理设备上看上去大小总是差不多 ,目的是为了保证阅读体验一致。为了达到这一点浏览器可以直接按照设备的物理像素大小进行换算,而css
规范中使用**"参考像素"**来进行换算。
2、DP(device pixels)
1 定义
设备像素(物理像素),顾名思义,显示屏是由一个个物理像素点组成的,通过控制每个像素点的颜色,使屏幕显示出不同的图像,屏幕从工厂出来那天起,它上面的物理像素点就固定不变了,单位pt。
2 设备像素(DP)与CSS像素之间的关系
获得设备像素比(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
说的是像素密度,而分辨率说的是块屏幕的像素尺寸,譬如说 1334*750 就是 iPhone(6~7)的分辨率,说 iPhone(6~7)的分辨率是 326 是错误的表述,326 是它的像素密度,单位是 PPI
。
询问别人一粒像素有多大是一个非常鸡贼的问题(小心面试遇到这样的题),虽然我们说像素是构成屏幕的发光的点,是物理的,但是像素在脱离了屏幕尺寸之后是没有大小可言的,你可以将 1920 * 1080 颗像素放到一台 40 寸的小米电视机里面,也可以将同样多的像素全部塞到一台 5.5 寸的 iPhone7 Plus 手机里面去,那么对于 40 寸的电视而言,每个像素颗粒当然会大于 5.5 寸的手机的像素。
所以光看屏幕的分辨率对于设计师来说是不具备多少实际意义的,通过分辨率计算得出的像素密度(PPI)才是设计师要关心的问题,我们通过屏幕分辨率和屏幕尺寸就能计算出屏幕的像素密度的。
再次使用 iPhone(6~7)作为例子。我们知道该屏幕的横向物理尺寸为 2.3 英寸 ,且横向具有 750 颗像素,根据下面的公式,我们能够算出 iPhone(6~7)的屏幕是 326 PPI,意为每寸存在 326 颗像素。
其实不论我们怎么除,计算得出来的像素密度(PPI)
都会是这个数,宽存在像素除以宽物理长度,高存在像素除以高物理长度,得数都接近于 326。
——————————————————————————
问题:看这些东西云里雾里的,似懂非懂,可能要以后做项目的过程中去体会
————————————————
明日安排:完成项目三
评论