场景:
人物:前端实习生「阿树」与 切图工程师「玉凤」 事件:设计师出设计稿,前端实现页面
玉凤:树,设计稿发给你啦,差那么点像素,就叼死你┏(  ̄へ ̄)=? 阿树:~(>_<)~毛问题噶啦~ 阿树:哇靠,为啥你给的设计稿是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。
设备像素与CSS像素之间的换算是如何产生的呢? 这就需要要谈到每英寸像素(pixel per inch)和设备像素比(device pixel ratio)。
每英寸像素(pixel per inch): ppi,表示每英寸所拥有的像素(pixel)数目,数值越高,代表显示屏能够以越高的密度显示图像。ppi的计算方式可以参考维基百科每英寸像素
设备像素比(device pixel ratio): 以上计算出ppi是为了得到密度分界,获得默认缩放比例,即设备像素比。
由上图可知,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开发必备知识
<原地址:http://www.jianshu.com/p/af6dad66e49a>