屏幕是由很多像素点组成的，我们在屏幕上看到的一条线、一个面、一张图都是由最小的单位像素来表示的。
设备像素（device pixel）
设备像素是物理概念，设备生产出来时就已经被确定了。例如：iPhone5的分辨率是 640*1136，代表屏幕由640行、1136列的像素点组成的。
CSS像素
是Web编程的概念，指的是CSS样式代码中使用的逻辑像素，是相对单位而不是绝对单位。
比如iPhone 5的Retina屏幕，设备像素数为 640 x 1136px，而CSS逻辑像素数为320 x 568px，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel。
设备像素与CSS像素之间的换算如何产生？
根据像素密度，可获得设备像素与CSS像素之间的换算比例。具体为：
像素密度（PPI）pixels per inch
对角线长度为1英寸（2.54厘米）上的像素点数量。像素密度越高，屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。
ppi在120-160之间的手机被归为低密度手机，160-240被归为中密度，240-320被归为高密度，320以上被归为超高密度（Apple给了它一个高大上的名字——Retina）。
设备像素比
获得了像素密度后，对照上述表格，可得换算比例，也称为设备像素比。
设计师和前端工程师，如何协作
一般由设计师按照设备像素(device pixel)为单位制作设计稿。 前端工程师，参照相关的设备像素比(device pixel ratio)，进行换算以及编码。
比如根据iPhone5出稿的设计稿的中有一个width:100px,height:200px的按钮 那么前端工程师在编码web页面时应该写width:50px,height:100px.
小知识
小知识：屏幕普遍采用RGB色域(红、绿、蓝三个子像素构成),而印刷行业普遍使用CMYK色域(青、品红、黄和黑)
