什么是物理像素
作为一个前端开发工程师，平时做的工作之一就是还原ui设计师的给我们的设计图，设计图通常是以iphone6的尺寸(375*667)给到我们的
这里的尺寸指的是 物理像素，那什么是物理像素呢，以下摘自百度百科
物理像素是指由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。可以将像素视为整个图像中不可分割的单位或者是元素。不可分割的意思是它不能够再切割成更小单位抑或是元素，它是以一个单一颜色的小格存在。每一个点阵图像包含了一定量的像素，这些像素决定图像在屏幕上所呈现的大小
简单点理解就是 物理像素 是构成图像的 最小单位，表现形式是一个个 方格，这些方格有 位置 和 颜色 的属性，颜色的具体表现是由 红绿蓝 混合而来，而这些分布在不同位置不同颜色的方格就构成了我们所看到的图像
物理像素的大小其实是 不固定的，怎么理解呢？就拿 375 * 667 的分辨率来说，其代表的含义是 横向 上有375个物理像素点，纵向有 667 个物理像素点，那么整个屏幕所拥有的像素点则为 375 * 667 = 250125，而iphone6的宽高尺寸为6.7cm/13.8cm，那么可以知道iphone6屏幕的面积为6.7 * 13.8 ~= 92.46cm^2，那么可以算出一个物理像素点所占的面积为 92.46 / 250125 = 0.0003696551724137931cm^2，假设同样的分辨率拿到iphone6 plus上，按相同的方式计算出一个物理像素大小为 0.0004914502748625687cm^2
从上述的比较中，我们可以知道同样的分辨率下，iphone6 plus上的物理像素点是比iphone6上的大的，因此也证明了物理像素大小是不固定的这一结论，对于物理像素点大小的规律总结如下：
- 同一分辨率下，物理设备尺寸越大，物理像素的方格越大，所呈现的图像就越模糊
- 同一尺寸的物理设备下，分辨率越大，物理像素的方格越小，所呈现的图像就越清晰
其实对于物理像素大小的求解过程做下延伸：我们不去算每一个像素点的大小，而是去算对角线为一英寸的面积内所包含的像素数。这就引出了 屏幕像素密度 的概念，请接着看下文
什么是屏幕像素密度
屏幕像素密度的定义为：每英寸屏幕所拥有的像素数，即在一个对角线长度为1英寸的正方形内所拥有的像素数。它在不同的场景下有有不同的名字，分为如下两种
- PPI： Pixels Per Inch(像素每英寸),适用于图像的分辨率，也就是多用于显示器的场景下，ppi越高，图像越清晰
- DPI: Dots Per Inch(点每英寸)，各类输出设备每英寸上可产生的点数，多用于打印机，绘图仪的场景
对于我们前端工程师来说，更常用的是PPI
上述说了这么多，都是讲的关于物理像素的东西，其实还有一个很重要的概念：逻辑像素，那它是什么呢？请看下文
什么是逻辑像素
其实这个概念最早是乔布斯在发布iphone4时提出的，当时iphone4搭载了史无前例的 retina屏(视网膜屏)，具体来讲，就是用2x2个物理像素来表示一个逻辑像素，这样可以更精细和细腻地表现图像，一下让人们进入了高清的时代
逻辑像素是一个 相对单位，相对的是 物理像素，其相对性体现在在同一个设备上或在不同设备之间1个逻辑像素所代表的物理像素数是可以变化的，也就是说1px可以由2x2、3x3个物理像素来表示
逻辑像素由于脱离了设备，因此可以更好的去做设备适配，在我们做适配的过程中，还需要理解一个重要概念，那便是 设备像素比，那它又是什么呢？请看下文
什么是设备像素比
设备像素比(dpr)描述的是 未缩放状态下，物理像素和逻辑像素的初始比例关系，举例说明，如果1个逻辑像素由2x2个物理像素组成，那么dpr就为2，如果是3x3，那么dpr为3
对于不同的dpr的设备，我们需要做对应的调整，在js里，我们可以通过 window.devicePixelRatio 来获取，在css中可以通过min-device-pixel-ratio 来获取
一般对于不同的dpr，我们需要使用不同的图片，也就是所谓的x倍图，原理就是根据不同dpr来等比放大图片，从而保证图像的清晰度
结语
之前一直对分辨率、像素这一类概念不是特别清晰，因此才会想着写这篇文章，现在我已经很清晰了，你呢？
