像素

在平时的码代码时，总是会用到px这个东西，之前对它只是觉得是图片的一个单位。这只是一个小的概念呢。
px是CSS和JS使用的抽象单位。在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。
px是一个相对单位，相对的是设备像素(device pixel)。
在这里补充一下，设备像素就是我们平时说的物理像素。与之相对应的还有一个叫逻辑像素，逻辑像素有一个称呼叫css像素——px。
由于不同的物理设备的物理像素的大小是不一样的，所以css认为浏览器应该对css中的像素进行调节，使得浏览器中 1css像素的大小在不同物理设备上看上去大小总是差不多 ，目的是为了保证阅读体验一致。为了达到这一点浏览器可以直接按照设备的物理像素大小进行换算，而css规范中使用“参考像素”来进行换算。

1参考像素即为从一臂之遥看解析度为96DPI的设备输出（即1英寸96点）时，1点（即1/96英寸）的视角。它并不是1/96英寸长度，而是从一臂之遥的距离处看解析度为96DPI的设备输出一单位（即1/96英寸）时视线与水平线的夹角。通常认为常人臂长为28英寸，所以它的视角是:
(1/96)in / (28in * 2 * PI / 360deg) = 0.0213度。
默认情况下一个CSS像素应该是等于一个物理像素的宽度的，但是浏览器的放大操作让一个CSS像素等于了两个设备像素宽度。在后面你会看到更复杂的情况，在高PPI的设备上，CSS像素甚至在默认状态下就相当于多个物理像素的尺寸。CSS像素从来都只是一个相对值

说的这些，其实现阶段还有点没理清。先整理一些概念，慢慢消化，以后慢慢探索其中的原因。