前端工程师需要明白的「像素」

场景:

人物:前端实习生「阿树」与 切图工程师「玉凤」 事件:设计师出设计稿,前端实现页面

玉凤:树,设计稿发给你啦,差那么点像素,就叼死你┏(  ̄へ ̄)=? 阿树:~(>_<)~毛问题噶啦~ 阿树:哇靠,为啥你给的设计稿是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>

时间: 2024-10-14 19:47:18

前端工程师需要明白的「像素」的相关文章

美团第一位前端工程师竟是转行程序员!关于他的10年技术生涯

从饭否到美团,潘魏增用十年的技术生涯,诠释了"长期有耐心"这句话的含义.在他看来,长期有耐心,其实也是延迟满足感.对从事的行业来讲,我们要把眼光放得更长远一些,十年后才有回报的生意,往往都是大买卖. 对个人来讲,不要把职位.职级这些虚的东西看得过重,关键看我们自己在其中承担什么角色,看我们自己的能力是否还有成长的空间. #从电子工程转到计算机 1.为什么大学读的是电子系,但是毕业后却选择了互联网行业? 潘魏增:高中时,对物理比较感兴趣,学校有一个逸夫图书馆,里面有大量关于物理的课外读物

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

CSS在很多程序员看来那只不过是雕虫小技, 实际上CSS3发展到今天已经强大到超乎你的想象, 当然对于低端浏览器使用者来说,还是以前那样——囧 有时候搞CSS开发确实需要很多想象力,下面一组纯CSS3特效足以描述这一点 以下内容转载自[http://design.yesky.com/show/466/11497966_3.shtml] 设计欣赏:纯CSS3「绘制」的图形图标 IE 标志 作者: Andreas Jacob 在 Firefox 3.6+ 以及Safari 5 上显示最佳.使用了圆角

前端工程师必须收藏的 CSS 资源大全

我想很多程序员应该记得 GitHub 上有一个 Awesome:XXX 系列的资源整理.awesome-css 是 sotayamashita 发起维护的 CSS 资源列表,内容包括:CSS预处理器.框架.CSS结构.代码风格指南.命名习惯.播客.演讲视频.大网站的 CSS 开发经验等等. Awesome 系列虽然挺全,但基本只对收录的资源做了极为简要的介绍,如果有更详细的中文介绍,对相应开发者的帮助会更大.这也是我们发起这个开源项目的初衷. 预处理器 更快地编译 CSS GCSS:一个用GO语

整个互联网行业都缺前端工程师?

本文来自 100offer 团队原创,部分内容译自:Why can’t we find Front End developers? 前端工程师的缺乏问题几乎蔓延到整个互联网行业,从刚起步的创业公司,到上市公司乃至巨头,这个问题都存在着.没错,优秀的前端工程师简直比大熊猫还稀少. 每天,100offer 的 HR 群都有人在吐槽招不到靠谱的前端工程师.实话说对这些需求,100offer 也无能为力:在供不应求的前端招聘市场上,优秀的前端工程师才是有话语权的那一方. 在国外,前端工程师一样是需求旺盛

前端工程师说明(仅以自勉)

现在,一位合格的前端工程师,必须对视觉设计有兴趣. 很显然,要处理大量的Web应用程序需求,技术任务就要进行分类,以便于多人同时处理网站请求.事实上,现在已经不可能一个人快速地解决所有的技术细节了. 1.前端的误解 大多人都认为前端开发是一个[相对于其他模块来说更简单的领域],在他们心中的前端工程师是这样工作的的: 1.把Photoshop文件.图片或者线框放进一个网页: 2.偶尔设计Photoshop文件.图片或者线框: 3.用JS编程,为网页制作动画.过渡效果: 4.用HTML和CSS编程,

淘宝前端工程师:国内WEB前端开发十日谈

转自:http://www.jianshu.com/p/8cf2df3fdbf2 一直想写这篇“十日谈”,聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是“初级”前端开发工程师,一方面我入道尚浅,只有短短几年,另一方面我自知对技术的钻研并不深入,可能是由于环境的原因,当然最重要的是,我幸运的参与到互联网崛起的浪潮之巅.时势造就了一批技能薄弱但备受追捧的“弄潮者”,这在很大程度上影响我们对“技术本质”

前端工程师应该具备的三种思维

如果你是一个天才等级的工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你.但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需要协调和配合,需要考虑除了代码以外的更多事情. 前端工程师,也不仅仅只是负责接资料,捞数据,做个回应.当然只做这些也并没有不对,但我们需要和后端工程师沟通,我们也需要和设计沟通,也需要和 PM 沟通,怎么做才是对这三方都比较有好处? 逻辑思维 在开始写某一段代码的时候,想一下它会用在哪里,会重

对于前端工程师来说必须掌握的思维方式

如果你是一个天才等级的工程师(马上可以离开),可以独立完成一个很多事情.但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,往往我们需要团队合作,需要协调和配合,需要考虑除了代码以外的更多事情. 前端工程师,也不仅仅只是负责接资料,捞数据,做个回应.当然只做这些也并没有不对,但我们需要和后端工程师沟通,我们也需要和设计沟通,也需要和 PM 沟通,怎么做才是对这三方都比较有好处? 逻辑思维 在开始写某一段代码的时候,想一下它会用在哪里,会重复用吗? 它以后会不会变,如果会变,那可以怎样变

设计师遇到前端工程师

作为互联网产品设计师,在和前端开发人员沟通时有没有想过这样的疑问: ——圆角阴影实现起来真的有那么难吗? ——载入更多的东西用户可以得到更多的信息,但是页面慢了该如何取舍呢? 面对这些问题,除了要重新考虑自己的设计,有没有想过是什么原因导致出现这样沟通偏差,有没有解决的办法呢?设计师需要了解哪些知识才能和前端开发人员来更好的合作呢? 首先得从这两者之间都有哪些不同说起.我认为最主要原因在于设计师和前端开发在部门中不同的职责划分.通常情况下,产品设计师的产出物多是线框图(wireframe),视觉