【响应式web设计(一)】像素

理解几个概念

(1) px : css pixels 逻辑像素  

浏览器使用的抽象单位，定义同样一个100*100px的图片，在不同分辨率的屏幕上大小不相同；

下面三个截图就是同一段代码在同一机器的不同分辨率情况下的显示效果。可见，px在移动端设计中的显示是不靠谱的。

 

(2) dp : device independent pixels 设备无关像素 （逻辑像素，开发中使用的像素时逻辑像素）

dp是和屏幕“像素密度”相关的一个单位，先解释一下什么是“像素密度”？

假设有一部手机，屏幕的物理大小为1.5英寸X2英寸，屏幕分辨率是240X320，则我们可以算出这部手机屏幕上每英寸包含的像素点为240/1.5=160dpi(横向)和320/2=160dpi(纵向)，

160就是这部手机的像素密度，dpi是dots per inch的缩写，即每英寸的像素量。横纵相等是因为像素为正方形。

 

不同的手机/平板可能有不同的像素密度。比如，同为4英寸的手机，分辨率有480X320的，也有分辨率为800X480的，前者的像素密度比后者低。

 

Android系统定义了四种不同的像素密度：低（120dpi）、中（160dpi）、高（240dpi）、超高（320dpi），每一种像素密度都对应了不同的换算px到dp的系数，该系数成为默认缩放比，如下表所示：

 

计算公式：1px  = (dpr)² * dp    (dpr=上述系数)

 

例如界面上有一个长度为“80dp”的图片，那么它在240dpi的手机上实际显示为80x1.5=120px，在320dpi的手机上实际显示为80x2=160px。如果你拿这两部手机放在一起对比，会发现这个图片的物理尺寸“差不多”，这就是使用dp作为单位的效果。

 

以iphone5为栗子：

 

iphone5的屏幕分辨率为640X1136 ，iphone5的屏幕采用了320dpi的retina屏幕，对应上表，知道dpr为2，那么iphone5的dp = 320 X 568 ，dp为逻辑像素，也是开发过程中使用的像素，所以如果给iphone5的屏幕添加背景时，背景图片的大小为320X568，设计师再出原型图时也会按照这个逻辑像素来定义宽高和间距标注。