css

像素

Posted by Eleanor Mao on 2019-03-29

像素不是一个点或方块。而是一种抽象概念，是一个抽象取样。

像素的定义是上下文敏感的。比如，在打印机上的物理像素是打印机的墨点。在显示器上的物理像素是显示器的点距。

没有什么卵用的小支持：pix(picture) + el(element) = pixel

谈论像素，还需要讲到另外几个概念。

DPI

Dots Per Inch。指的是每英寸上的点的数量。

PPI

Pixel Per Inch。指的是每英寸上的像素的数量。PPI越高就是一英寸的点点越多。

但是因为像素的概念是上下文敏感的。虽然他们有不同的定义，但PPI和DPI有时是可以互换的。在显示器上他们的概念就是相同的。

显示的PPI，如果确定屏幕尺寸和分辨率是可以利用公式计算的。

计算公式是

1
2
3
4
5
6
PPI = dp / di = Math.sqrt(wp * wp + hp * hp) / di

// dp 是屏幕对角线的分辨率
// wp 是屏幕横向分辨率
// hp 是屏幕纵向分辨率
// di 是屏幕对角线的长度(单位是英寸)

Device Pixel

这指的是显示器上的单个物理点。屏幕的话，从出厂起，上面的物理像素点就固定了，单位是pt。

我们通常所说的显示器分辨率，其实是指桌面设定的分辨率，而不是显示器的物理分辨率。只不过现在液晶显示器成为主流，由于液晶的显示原理与CRT不同，只有在桌面分辨率与物理分辨率一致的情况下，显示效果最佳，所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。

W3C中讲到，在CSS单位中物理单位是 1pt = 1/72 inch。

但是包包有点怀疑这个1pt的真正长度。因为iPhone8的宽度是2.65inch。所以对应宽度是2.65/(1/72)=190.8pt。但是实际测试并没有那么宽。同时也是会随着分辨率设定而变。所以包包很怀疑他说的英寸其实是逻辑英寸。

那么什么是逻辑英寸嘞。

逻辑英寸

那么逻辑英寸是怎么来的嘞。

这就要提到在印刷中，字号的度量衡是点（points）。

1pt = 1/72inch (从历史上看一个点的确切度量是变化的)

比如一个12点的文字是为了适应1/6inch的文本行设计的，但并不是每个字母都是那么高的，比如说Å。所以为了能正确展示文字，会在文字的两边留出行距。

上图是一个72pt的文字。然而把它放在展示的时候，因为像素尺寸不一，所以文字展示也可能会不同。

像素的大小主要依赖分辨率和显示器物理尺寸。因此，物理英寸就不是一个有用的度量衡了。因为物理英寸和像素之间没有固定关系。所以字体以逻辑单位测量。一个72pt的字体被定义为一个逻辑英寸高。然后把逻辑英寸转为像素。多年来，windows使用的都是：1个逻辑英寸 = 96px。所以一个72pt的字体会被渲染为96px高。一个12pt的字体是16px高

所以得出 12pt = 12/72逻辑英寸 = 1/6逻辑英寸 = 96/6px = 16px

这个缩放因子被描述为96个点每英寸。在电脑展示中，更准确的说法是96个像素每逻辑英寸

另外在一本记不起名字的书中提到几点。

  1. 真实的物理尺寸需要依据显示器与操作系统/用户设置而定。
  2. 而点距决定了物理像素的尺寸，从而可以确定逻辑英寸的物理尺寸。
  3. 因为显示器的点距不会改变，所以逻辑英寸的物理大小可能在高dpi的屏幕上就大一点，因此会包含更多的点。这样的设计会让你在不同显示器上设置的宽度都是看起来一样的。

没有什么卵用的小知识：由于实际像素大小不同，因此在一台显示器上可读的文本在另一台显示器上可能太小。此外，人们有不同的偏好 - 有些人喜欢更大的文字。 因此，Windows允许用户更改DPI设置。 例如，如果用户将显示设置为144 DPI，则72磅字体的高度为144像素。 标准DPI设置为100％（96 DPI），125％（120 DPI）和150％（144 DPI）。 用户还可以应用自定义设置。 从Windows 7开始，DPI是按用户设置。

好的回到正题。我们实际到css中使用的是 CSS Pixel

CSS Pixel

CSS像素也可以说是逻辑像素

1px = 0.75pt

这在CSS单位中是一个绝对单位。

在同一设备上，每一个CSS像素所代表的物理像素是可以
变化的。在不同设备上，每一个CSS像素所代表的物理像
素也可以是不同的。

由于不同物理设备的物理像素大小不一，所以CSS认为浏览器
应该对CSS中的像素进行调节。使浏览器中1px的大小在不同的
物理设备上看上去差不多大，从而使阅读体验一致。

对于CSS设备，这些维度要么锚定（i）通过将物理单位与其物理测量相关联，或者（ii）通过将像素单位与参考像素相关联来锚定。对于打印介质和类似的高分辨率设备，锚单位应该是标准物理单位之一（英寸，厘米等）。对于分辨率较低的设备和具有不寻常观看距离的设备，建议将锚单位作为像素单元。对于这样的设备，建议像素单元参考最接近参考像素的设备像素的整数。

注意，如果锚单位是像素单位，那么物理单元可能与它们的物理测量值不匹配。或者，如果锚单位是物理单位，像素单位可能不会映射到所有设备像素。

注意，这个像素单位和物理单位的定义与以前版本的CSS不同。特别是，在以前的CSS版本中，像素单位和物理单位之间并没有固定的比例关系:物理单位总是与它们的物理测量值相关联，而像素单位会随着参考像素的最接近而变化。(之所以做出这样的改变，是因为太多的现有内容依赖于96dpi的假设，而打破这个假设就会破坏内容。)

为了达到这一点浏览器可以直接按照设备的物理像素大小进行换算。所以那个pt和真实的pt其实是对不上的。 而CSS规范中使用参考像素进行换算。

1参考像素是从一臂之遥看96dpi的设备上1像素的视角。算出来
差不多1px是0.26mm

一般来手臂是28inch长（71cm），所以可以算出大概这个视角是0.0213°。然后从一个胳膊的距离看过去1px相当于0.26mm（1/96inch）

计算公式： (1/96)in / (28in 2 PI / 360deg) = 0.0213°

好的。最后让我们来了解一下⬇️

Device Pixel Radio

这是设备像素比。等于 物理像素 / CSS像素。

设备像素比与ppi相关，一般是ppi/160的整数倍。因为看手机的最佳距离据说是18inch，根据参考像素推算出来，理想的ppi是（28/18）* 96 ≈ 每英寸150像素。

请看下面这个图

Iphone7 都是宽是2.3英寸高7.1英寸。实际上他是每行有750个像素，每列有1334个像素。右边假设ppi是左边的一半。方块是 326*326px。

为了让他们看起来一样，所以就要缩一下。反过来说一张200 * 200的图片，如果放在2倍屏上，为了看起来和1倍屏物理大小一样，所以被放大了一倍。这就是为什么图片会糊了……

图像显示了影响设备的分辨率的像素单元:1 px的面积1 px是由一个单一的点在一个低分辨率的设备(例如,一个典型的计算机显示器),在同一地区覆盖了16点高分辨率设备(如打印机)。 本来图片1个像素对应一个点，现在1个像素被分成了一大堆点。

所以这就是为什么一个图片不用N倍图的话在高分辨率设备上会变糊了。

通过CSS使1倍图在高分辨率屏幕上尽量清晰的方法

可以使用属性 Image-rendering

1
2
3
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

auto：默认值， 图像缩放时以外观优先。颜色过渡”平滑”算法是很合适的,比如双线性插值算法。 这种适合于照片。 从 1.9版本起 (Firefox 3.0), Gecko 使用双线性插值算法(高质量)。

crisp-edges：图像缩放时,该算法保留图像的对比度和边缘.在不平滑过渡的颜色中引入模糊图像. 这常用于像素级作品

pixelated：当缩放图像时, 使用”nearest neighbor”或类似算法, 所以图像将由大像素组成. 当缩小时，效果与’auto’值一样。

此属性不指示要使用的任何特定缩放算法。 例如，使用图像渲染：auto，用户代理可以默认使用双线性插值缩放图像，在高负载情况下切换到最近邻插值，并切换到高质量缩放算法，如Lanczos插值，用于静态图像 没有移动或改变。 类似地，对于“图像渲染：清晰边缘”，用户代理可以默认使用最近邻插值来缩放图像，并在低负载情况下切换到EPX插值。查看

FEATURED TAGS
css
FRIENDS