随着移动设备浏览量的迅速增长,自适应网页设计变得越来越重要名名名名名名名名.web程序员在开发移动端页面时时常会遇到这样的问题,手机设备商声明的屏幕像素宽度尺寸和网页开发时使用的CSS像素宽度不一致,为什么会出现这种情况呢?

此像素非彼像素

设备像素(设备像素)

指的英文的设备中使用的物理像素 为

CSS像素(CSS像素)

CSS像素是网络编程的概念,指的是CSS样式代码中使用的逻辑像素CSS 规范中,长度单位可以分为两类,绝对(绝对)单位以及相对(相对)单位.PX是一个相对单位,设备

比如iPhone 5使用的是Retina视网膜屏幕,使用2px x 2px的设备像素代表1px x 1px的css像素,所以设备像素数为640 x 1136px,而CSS逻辑像素数为320 x 568px。

设备像素与CSS像素之间的换算是如何产生的呢?

这就需要要谈到每英寸像素(像素/英寸)和设备像素比(设备像素比)。

每英寸像素(每英寸像素数)

PPI,表示每英寸所拥有的像素(像素)数目,数值越高,代表显示屏能够以越高的密度显示图像.ppi的计算方式可以参考维基百科每英寸像素

设备像素比(设备像素比)

以上计算出的PPI是为了得到密度分界,获得默认缩放比例,即设备像素比。

由上图可知,PPI在120-160之间的手机被归为低密度手机,160-240被归为中密度,240-320被归为高密度,320以上被归为超高密度(苹果给了它一个高大上的名字--Retina)。

获得设备像素比后,便可得知设备像素与CSS像素之间的比例当这个比率为1:1时,使用1个设备像素显示1个CSS像素当这个比率为2:1时,使用4个设备像素显示1个CSS像素,当这个比率为3:1时,使用图9(3×3)个设备像素显示1个CSS像素。

美工和WEB前端开发人员之间如何协同

一般美工按照设备像素(device pixel)为单位制作设计稿。前端工程序员,参照相关的设备像素比(device pixel ratio),进行换算以及编码。