Open XiZev opened 3 years ago
计算机屏幕上的线都是不连续的,实际上它是由一个个点组成的,这些点就是屏幕上所能显示的最小单位——设备像素。
而实际上,一个设备像素点又可以细分为红、绿、蓝三种子像素(RGB色域) 如果直接让CSS像素等于设备像素,会存在两个问题
先介绍几个概念:屏幕分辨率、屏幕尺寸、屏幕像素、屏幕密度
在同一个设备调整分辨率 例:屏幕推荐的分辨率1366px768px是在出厂时就已经设置好的,再怎么拉扯,这个数字是不会变了。然而调整屏幕分辨率到800px600px时,系统就会分配给你要设置的有效像素个数,其他的个数由系统通过一系列运算产生一个模拟色彩块,填充成正好1366*768个色彩块。这些拿来充数的像素块,和真实的像素块放到一起,组成新的分辨率。
同样尺寸的屏幕,存在不同屏幕密度,以致于显示效果差异巨大: 例如:同样是4寸的屏幕,大的屏幕密度为640x1136,小的屏幕密度为320x568。那么在这个情况下,如果让CSS像素直接等于设备像素设置,把CSS像素设置为为500x300,那么肉眼看下来尺寸相差有1倍多。
不同尺寸,相同屏幕密度,会导致页面布局混乱: 例如:两个不同分辨率的设备,在设置两个相同大小的元素时,由于分辨率小的设备宽度不够,会发生折行。
由来 不同的设备的物理像素的大小是不一样的(出厂时的屏幕尺寸和分辨率决定PPI),所以览器应该对CSS中的像素进行调节,使得浏览器中 1CSS像素的大小在不同物理设备上看上去大小总是差不多 ,目的是为了保证阅读体验一致(否则会导致出现上面的两个问题)。为了达到这一点浏览器可以直接按照设备的物理像素大小进行换算,而css规范中使用"参考像素"来进行换算。
一个参考像素即为从一臂之遥(通常认为常人臂长为28英寸)看解析度为 96DPI 的设备输出(即1英寸96个设备像素点)时,1点(即一个设备像素点的物理大小:1/96英寸)的视角。所以它的视角是: (1/96)in / (28in * 2 * PI / 360deg) = 0.0213度。
(通常认为常人臂长为28英寸)
(即1英寸96个设备像素点)
(即一个设备像素点的物理大小:1/96英寸)
所以它的视角是: (1/96)in / (28in * 2 * PI / 360deg) = 0.0213度
如图所示,当设备的典型观看距离越远时,参考像素就越大(注意这里的大,不是指视角变大,而是角度对应在屏幕上的尺寸变大)。对于两个不同DPI的设备(一个像素点的物理大小不一样),就需要不同个数的设备像素点来表示一个CSS像素,96DPI的设备需要1个物理像素,52.45DPI的设备需要大概2-3个物理像素点来表示。这就解释了对于不同尺寸的设备,1个CSS像素的显示都是差不多的。
设备像素(device pixel, dp)
同样尺寸的屏幕,存在不同屏幕密度,以致于显示效果差异巨大: 例如:同样是4寸的屏幕,大的屏幕密度为640x1136,小的屏幕密度为320x568。那么在这个情况下,如果让CSS像素直接等于设备像素设置,把CSS像素设置为为500x300,那么肉眼看下来尺寸相差有1倍多。![微信截图_20210323180706](https://user-images.githubusercontent.com/38035867/112129675-9dc9bf80-8c02-11eb-81df-75fd3c4104ef.png)
不同尺寸,相同屏幕密度,会导致页面布局混乱: 例如:两个不同分辨率的设备,在设置两个相同大小的元素时,由于分辨率小的设备宽度不够,会发生折行。![微信截图_20210323215729](https://user-images.githubusercontent.com/38035867/112158336-04f76c00-8c23-11eb-8cc2-d22822812704.png)
参考像素(reference pixel)
一个参考像素即为从一臂之遥
(通常认为常人臂长为28英寸)
看解析度为 96DPI 的设备输出(即1英寸96个设备像素点)
时,1点(即一个设备像素点的物理大小:1/96英寸)
的视角。所以它的视角是: (1/96)in / (28in * 2 * PI / 360deg) = 0.0213度
。如图所示,当设备的典型观看距离越远时,参考像素就越大(注意这里的大,不是指视角变大,而是角度对应在屏幕上的尺寸变大)。对于两个不同DPI的设备(一个像素点的物理大小不一样),就需要不同个数的设备像素点来表示一个CSS像素,96DPI的设备需要1个物理像素,52.45DPI的设备需要大概2-3个物理像素点来表示。这就解释了对于不同尺寸的设备,1个CSS像素的显示都是差不多的。