场景：
人物：前端实习生「阿树」与 切图工程师「玉凤」
事件：设计师出设计稿，前端实现页面
玉凤：树，设计稿发给你啦，差那么点像素，就叼死你┏( ￣へ￣)=☞
阿树：(>_<)毛问题噶啦~
阿树：哇靠，为啥你给的设计稿是640px宽 ，iPhone 5不是320px宽吗？？？
玉凤：A pixel is not a pixel is not a pixel, you know ?
阿树：(#‵′)，I know Google。。。
为什么会出现以上的情况，难道他们当中一位出错了，摆了这样的乌龙？
事实上，他们都是对的，只是谈的不是同一个「像素」。
此像素非彼像素
设备像素(device pixel):
设备像素设是物理概念，指的是设备中使用的物理像素。
比如iPhone 5的分辨率640 x 1136px。
CSS像素(css pixel):
CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。
在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是设备像素(device pixel)。
比如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为640 x 1136px，而CSS逻辑像素数为320 x 568px。
retina-pixel.png
设备像素与CSS像素之间的换算是如何产生的呢？
这就需要要谈到每英寸像素(pixel per inch)和设备像素比(device pixel ratio)。
每英寸像素(pixel per inch)：
ppi，表示每英寸所拥有的像素(pixel)数目，数值越高，代表显示屏能够以越高的密度显示图像。ppi的计算方式可以参考维基百科每英寸像素
设备像素比(device pixel ratio)：
以上计算出ppi是为了得到密度分界，获得默认缩放比例，即设备像素比。
device-pixel-ratio.jpg
由上图可知，ppi在120-160之间的手机被归为低密度手机，160-240被归为中密度，240-320被归为高密度，320以上被归为超高密度（Apple给了它一个高大上的名字——Retina）。
获得设备像素比后，便可得知设备像素与CSS像素之间的比例。当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为2:1时，使用4个设备像素显示1个CSS像素，当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。
想要了解主流移动设备的设备像素比(device pixel ratio)可以参考以下两个网站：
http://screensiz.es/
http://www.devicepixelratio.com/
最后关于设计师和前端工程师之间如何协同：
一般由设计师按照设备像素(device pixel)为单位制作设计稿。
前端工程师，参照相关的设备像素比(device pixel ratio)，进行换算以及编码。
参考：
「1」:A pixel is not a pixel is not a pixel
「2」:像素密度的危机
「3」:移动端webapp开发必备知识
网友评论
1. （移动端设备宽度/ps设计稿宽度）=（css里面要转换的px/ps里面你测量出来的px）；这种的缺点在于，你需要用js去获取一下设备宽度。
2. （移动端显示的字体大小/ps设计稿标注的字体大小）=（css里面要转换的px/ps里面你量出来的px）；
这种方法的缺点在于，主观性太强，或者Ui根本不知道它这个字体在网页里面究竟是多大的时候，误差就出现了。不过有一点好，千变万变，人眼能接受的舒服字体大小是不会变的（16px-18px），加了viewport之后，不管分辨率如何，浏览器总会将16px缩放至人眼看起来很舒服的大小
呐，哪里写的不清楚？我改改。
一般由设计师按照设备像素(device pixel)为单位制作设计稿。
前端工程师，参照相关的设备像素比(device pixel ratio)，进行换算以及编码。
这个倒是挺有用的～
不过想说一下我的真实感受：看了你的解释后想了一两遍还是不明白，反而是参考「3」一看就明白了...