## 一、什么是像素？ 像素：**一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。** 这是像素的概念，实际上，在 web 前端开发领域，像素有以下两层含义： 1、设备像素：设备屏幕的物理像素，对于任何设备来讲物理像素的数量是固定的。 2、CSS像素：这是一个抽象的像素概念，它是为 web 开发者创造的。 ### 1.1 设备像素 无论是早期的 CRT 显示器还是如今的 LCD 显示器，都是基于点阵的。也就是说通过一些列的小点排列成一个大的矩形，不同的小点通过显示不同的颜色来显示成图像。比如下图就是 LCD 显示器上一个 6x6 个小点排列成的矩阵：  注意每一个像素（pixel，也可以称之为 dot）又是由三个子像素 (subpixel) 红绿蓝组合而成。当需要显示图片信息时，它的工作原理可以如下图所示：  上图中的左侧是放大之后我们能看到的像素，而右侧就是对应像素在显示器上的显示情况了。 注意上图代表的仅是 LCD 显示器的物理像素情况，早期的 CRT 显示器的物理像素同样也是由独立的点组成。但是不存在 subpixel 的概念，情况如下图所示：  上面描述的这些显示器上的像素我们就称之为物理像素 (physical pixel) 或者设备像素 (device pixel)。 ### 1.2 CSS 像素 作为 Web 开发者，我们接触的更多的是用于控制元素样式的样式单位像素。这里的像素我们称之为 CSS 像素。 假设我们用 PC 浏览器打开一个页面，浏览器此时的宽度为 800px，页面上同时有一个 400px 宽的块级元素容器。很明显此时块状容器应该占页面的一半。 但如果我们把页面放大，放大为 200%，也就是原来的两倍。此时块状容器则横向占满了整个浏览器。 此时我们既没有调整浏览器窗口大小，也没有改变块状元素的 css 宽度，但是它看上去却变大了一倍——这是因为我们把 CSS 像素放大为了原来的两倍。 CSS 像素与屏幕像素 1：1 同样大小时：  CSS 像素 (黑色边框) 开始被拉伸，此时 1 个 CSS 像素大于 1 个屏幕像素：  也就是说默认情况下一个 CSS 像素应该是等于一个物理像素的宽度的，但是浏览器的放大操作让一个 CSS 像素等于了两个设备像素宽度。在高 PPI 的设备上，CSS 像素甚至在默认状态下就相当于多个物理像素的尺寸。 ## 二、PPI 是什么？ PPI 的复杂之处在于如果他所属的上下文环境不同，意义也会完全不一样。 当我们在谈论显示设备的 PPI 时，它代指的屏幕的像素密度；当我们在谈论和图片相关时，我们谈论的是打印时的分辨率或者打印机的打印精度。这里我们主要描述的前一种情况。 PPI 全称为 Pixel Per Inch，译为每英寸像素取值，更确切的说法应该是像素密度，也就是衡量单位物理面积内拥有像素值的情况。 在 1 英寸单位内面积内拥有的像素越多，密度越大，PPI 值就越高。但像素密度的实际意义是什么？它表达的是什么？或高或低对设备显示来说有什么影响？ 一般来说，我们当然希望 PPI 值越高越好，因为更高的 PPI 意味着在同一实际尺寸的物理屏幕上能容纳更多的像素，能够展现更多的画面细节，也就意味着更平滑的画面。原理如下：  但 PPI 过高同样也会带来问题，相同的图片素材，在越高的设备上会显示的越小。以下是一个像素在不同 PPI 设备上的可见情况，随着 PPI 的增高可视度越来越小：  那么可以预见一种很糟糕的情况是，同一尺寸的屏幕下假设 PPI 提高了一倍，很可能程序界面缩小了 4 倍（因为在屏幕尺寸不变的情况下物理像素点面积是原来的 1/4）。 以 Surface Pro 3 为例，它的默认分辨率是 2160x1440，也就是说 Surface 这台设备的屏幕物理像素有 2160x1440 个点，同时默认分辨率情况下，一个点物理像素点对应于一个分辨率像素。 但因为屏幕只有 12 寸，像素密度非常高，于是就出现了上面的问题，各个文字和图标被缩的太小了，电脑是完全不可用的。 解决方法是，Windows 默认将所有的文本和素材（实际上就是分辨率像素）都放大了 1.5 倍（在“屏幕分辨率”-“放大或缩小文本和其他项”中进行了设置），原来是一个物理像素对应一个分辨率下的像素，现在则是 1.5 个物理像素对应一个分辨率下的像素，也就意味着分辨率下的像素变大了，实际分辨率降低了，已经变成了1440x900。 从上面我们得知，因为高像素密度设备下的 UI 会采用一定比例的缩放：  正如上图所示，左侧普通屏幕中，2x2 的 CSS 像素真的只需要 2x2 的物理像素。但是右侧高清屏中，2x2 的 CSS 像素却需要 4x4 的物理像素。