px、em、rem区别 pt ppi dpi vw vh

px

• 像素实际上是一个颜色点，所以又称像素点。大量不同颜色点组成一张图像，因此图像的基本单位是像素px（没有比像素更精细的单位了）。
  像素主要用来表示图像大小和显示器分辨率（如1920*1080px）。像素本身的物理尺寸不固定，所以它的物理尺寸没有意义，有意义的是它的数量。

为什么像素的物理尺寸不固定？

• 像素本身不是物理世界的单位，是一个相对单位，尺寸可大可小。在高密度的屏幕上像素会变小，显示效果更清晰。因为“像素量px = 像素密度ppi
  x 屏幕尺寸in”，同样是1英寸的屏幕，密度越大，像素越多，则单个像素的物理尺寸越小。

都是图片相关信息，图片体积和像素有什么关系？

• 通常所说的100KB的图片指的就是图片的体积，首先一张图像在存储时，会描述每个像素点的颜色信息、位置、数量，这些描述数据就是图像的体积，如果像素越多自然图像体积越大。假如一张图片都是一个颜色，图像在保存时就会压缩，只存一个像素点的颜色信息，这样的图像体积会小很多。所以，像素点越多，颜色越复杂，图像体积越大。

为什么我们要买高像素的相机？

• 日常我们所说的几百万像素的相机，这个几百万像素指的是拍摄最大像素量照片时，图像宽高位置上像素量的乘积。如果像素量大，将来印刷或者在显示器上查看，在1英寸上就有足够多的像素显示，像素密度增加，图像也会更清晰。因此，我们更愿意买高像素的相机。

**总结：**像素px常用来描述图像尺寸和显示器分辨率。

ppi：像素密度（pixel per inch）

• 英寸屏幕上显示的像素量，密度单位。决定图片的物理显示尺寸，只有涉及到显示才有意义。值越大，显示越细腻。
• **计算公式：**ppi=屏幕对角线上的像素量px/对角线长度inch = √（屏幕横向像素^2 + 屏幕纵向像素^2）/对角线长度。

为什么说ppi决定图片的物理尺寸？

• 一个手机的显示屏在出厂时就确定了PPI的值，PPI越大，显示越高清。图片的物理尺寸 = PPI *
  Px，通常一张图像的px确定，ppi越大，则它的物理尺寸越小。所以为什么我们在高PPI的手机上，人眼看到的图像比低PPI的图形小。在设计行业，我们会针对高PPI的手机，设计更大像素的图像也是这个道理。
• 日常所说的分辨率有两个概念，一个指显示器的分辨率，另一个指图像的分辨率。显示器分辨率指显示器所能显示的像素多少（1920px1080px），显示器可显示的像素越多，画面就越精细，因为屏幕尺寸一定，分辨率越大，像素密度越大。显示器分辨率都用（1920px1080px）这种形式表示，清晰度还需要结合屏幕尺寸计算。图像分辨率则是单位英寸中所包含的像素点数，比如photoshop
  里新建画布时设置的图像分辨率72ppi，其定义更趋近于分辨率本身的定义

注意：

同一显示屏上查看图片，像素量越大，图片尺寸越大。

显示分辨率一定的情况下，显示屏越小图像越清晰（比如MacBook），反之，显示屏大小固定时，显示分辨率越高图像越清晰。

对于设计师来说像素密度很重要，需要很据像素密度来切图和适配，理解了像素密度的意义，就理解了几倍图之间的关系。