作为一名FE，每次谈图像时对各种概念都一知半解，虽然这方面知识从来都是问问够用就行没有深究过，但也遭不住每次都问别人啊，所以总结了一下前端应该知道的图像方面的知识。
基本概念：像素，分辨率等等
像素是一张图片或显示面上组成图像的点的绝对数量。
像素的单位是px，并不是个绝对大小，而是个基本成像单元，在不同的设备上一个单元的大小是不一样的。单元尺寸越小图像越细腻。相同单元大小情况下单元越多图像尺寸越大。
分辨率是每单位尺寸所含的像素数，常用单位是DPI（Dots Per Inch，常用于印刷行业）或PPI（Pixels per inch，常用于显示设备）。分辨率越高图像越细腻。
像素密度，即PPI，每单位面积所含的像素数。
以上资料来自百科，但发现在前端中，我们所说的屏幕分辨率，在某些情况下其实就是像素值，比如我们说这个电脑显示屏是 1440*900,但大家都叫屏幕分辨率，严格的分辨率更像是一个压强一样的单位。
同理，FE中img的width或height，同理，并不是物理的绝对长度单位，而是两个维度上图片包含的像素个数，即像素值。
dip或dp,device independent pixels，设备独立像素, 一种基于屏幕密度的抽象单位。在每英寸160点的显示器上，1dp = 1px。 dip 与dp相同.
举个栗子：
| 物理尺寸 | 屏幕分辨率 | 横向dpi | 纵向dpi | dp与像素的比 | 100dp |
|---|---|---|---|---|---|
| 1.5in * 2 in | 240px * 320px | 240/1.5 = 160 | 320/2 = 160dpi | 160dpi / 160 =1 | 100dp = 1 * 100 = 100px |
BT THE WAY
ReactNative中的PixelRatio.get() 其实取的就是 dpi/160 的值。也就是说，同样100px的图片，在PixelRatio为1的手机上是100dp，在为2的手机上是50dp。
网友评论