从PX单位到的CSS像素

PX
与显示设备相关。对于屏幕显示，通常是一个设备像素（点）的显示。对于打印机和高分辨率的屏幕，一个CSS像素意味着多个设备像素，因此，每英寸的像素的数量保持在96左右。

在MDN的CSS<length>属性中是这样介绍PX，为什么说PX是与设备相关而且是相对的单位呢？
其实CSS中使用的PX像素是一个为了方便WEB编程所设计出来的概念
例子1：

• 假如我们的图片有一个CSS属性<width=300px>，当我们缩放的时候，图片大小变了，但是它的属性<width=300px>却没有变。那为什么会这样呢。

例子2：

• 假如我们在IPHONE4上面定义一个<width=320px>的块，IPHONE4的分辨率是960PX*640PX，理论上应该占据屏幕的一半！但是事实却不是这样的，最终结果出来只会占三分之一左右，为什么会这样呢。

因为<width=320px>并不是定义在960*640这个分辨率上的，这个分辨率中的960和640我们称为设备像素(device piexl)，而其实<width=320px>的块是放在viewport上的，IPHONE4的默认viewport是980px，所以最终在页面上块只占据到三分之一左右。那么什么是viewport呢？
viewport其实也和CSS像素一样，是一个方便WEB编程的概念，CSS关于像素的设置就是放在这个viewport上的，可以想象viewport是一张不改变大小的图片，CSS的不同大小的块一个一个放置在上面。

viewport
上图中深色的背景为设备像素，而上面的透明层假设为viewport，假设默认设备像素和CSS像素是一比一，当用户缩小页面时，一个设备像素就需要容纳更多的CSS像素。当用户放大页面时，多个设备像素来呈现一个设备像素。 图1默认一比一 图2缩小 图3放大

上面的图是我自己简单画的，我理解的模型大概就是这样，三层的，最上面蓝色边框那层是CSS的各个元素，他们布局于中间绿色的viewport层上，下面黑色的是我们的浏览器窗口，在移动端就是设备屏幕。

下面我们再来看一个例子
例子3：

retina例子
上图是苹果的Retina屏幕，其实普通屏幕是一个设备像素显示一个CSS像素，Retina屏幕就是用四个设备像素显示一个CSS像素，所以Retina上显示的图片更精细,这里面还涉及到了PPI(pixel per inch)-每英寸显示的设备像素点，和DPR(device pixel ratio)-设备像素比例，其中相同的屏幕尺寸下PPI越高就是分辨率越高。而Retina的DPR是2，怎么算的呢，就是X轴或Y轴的设备像素/CSS像素，例如在上图，Retina的四个设备像素来显示一个CSS像素，在纵向或横向的比例是2:1，所以DPR就是2

备注：

1. 文中所涉及的CSS像素是在浏览器的概念，在移动端的概念是设备无关像素或者虚拟像素(device-independent pixel)，但是意思是一样的
2. <meta name="viewport" width="device-width">其实是把viewport剪裁成了设备屏幕宽度，而不是去缩放viewport到屏幕宽度

参考：
前端工程师需要明白的「像素」
A pixel is not a pixel is not a pixel
关于像素，分辨率，viewport，设备像素，css像素，Retina