search

XiZev / blog

record my learning of font-end
0 stars 0 forks source link

说一个CSS最基础：像素（pixel） #2

Open XiZev opened 3 years ago

XiZev commented 3 years ago

设备像素（device pixel, dp）

计算机屏幕上的线都是不连续的，实际上它是由一个个点组成的，这些点就是屏幕上所能显示的最小单位——设备像素。

微信截图_20210323171002 而实际上，一个设备像素点又可以细分为红、绿、蓝三种子像素（RGB色域） 微信截图_20210323171807 如果直接让CSS像素等于设备像素，会存在两个问题

先介绍几个概念：屏幕分辨率、屏幕尺寸、屏幕像素、屏幕密度

在同一个设备调整分辨率 例：屏幕推荐的分辨率1366px768px是在出厂时就已经设置好的，再怎么拉扯，这个数字是不会变了。然而调整屏幕分辨率到800px600px时，系统就会分配给你要设置的有效像素个数，其他的个数由系统通过一系列运算产生一个模拟色彩块，填充成正好1366*768个色彩块。这些拿来充数的像素块，和真实的像素块放到一起，组成新的分辨率。

  1. 同样尺寸的屏幕，存在不同屏幕密度，以致于显示效果差异巨大： 例如：同样是4寸的屏幕，大的屏幕密度为640x1136，小的屏幕密度为320x568。那么在这个情况下，如果让CSS像素直接等于设备像素设置，把CSS像素设置为为500x300，那么肉眼看下来尺寸相差有1倍多。 微信截图_20210323180706

  2. 不同尺寸，相同屏幕密度，会导致页面布局混乱： 例如：两个不同分辨率的设备，在设置两个相同大小的元素时，由于分辨率小的设备宽度不够，会发生折行。 微信截图_20210323215729

参考像素（reference pixel）

由来 不同的设备的物理像素的大小是不一样的（出厂时的屏幕尺寸和分辨率决定PPI），所以览器应该对CSS中的像素进行调节，使得浏览器中 1CSS像素的大小在不同物理设备上看上去大小总是差不多 ，目的是为了保证阅读体验一致（否则会导致出现上面的两个问题）。为了达到这一点浏览器可以直接按照设备的物理像素大小进行换算，而css规范中使用"参考像素"来进行换算。

一个参考像素即为从一臂之遥(通常认为常人臂长为28英寸)看解析度为 96DPI 的设备输出(即1英寸96个设备像素点)时，1点(即一个设备像素点的物理大小：1/96英寸)的视角。所以它的视角是: (1/96)in / (28in * 2 * PI / 360deg) = 0.0213度。

微信截图_20210324164851

如图所示，当设备的典型观看距离越远时，参考像素就越大（注意这里的大，不是指视角变大，而是角度对应在屏幕上的尺寸变大）。对于两个不同DPI的设备（一个像素点的物理大小不一样），就需要不同个数的设备像素点来表示一个CSS像素，96DPI的设备需要1个物理像素，52.45DPI的设备需要大概2-3个物理像素点来表示。这就解释了对于不同尺寸的设备，1个CSS像素的显示都是差不多的。

XiZev commented 3 years ago

微信截图_20210324153616