移动端布局之设备像素比的理解

设备物理像素 = 设备独立像素 * 设备像素比

设备物理像素：

指设备的屏幕分辨率。如iphone3屏幕分辨率为320 * 480，则该屏幕水平方向有320个像素，垂直方向有480个像素。在不缩放的前提下，CSS 中的1px等于1个像素。假设我有一个div，想让它占满 iphone3的屏幕宽度，设置width: 320px; 即可。

但苹果为了iphone4实现高清屏幕(也叫视网膜（Retina）屏幕)，增加了每英寸长度所能够排列的像素的数目，使iphone4分辨率为640 * 960。

说人话就是，iphone3在9厘米宽的屏幕中一行显示了320个像素(分辨率可知)，而iphone4在同样9厘米宽的屏幕中一行显示了640个像素。所以iphone3中1个像素的宽度，在iphone4中则应该有2个像素。

类似如下图（区别是下图为1.5倍数）：

每一行相同总长度，不同小方块的个数，一个小方块即1像素。

为了解决不同设备的每英寸像素不一样多的问题，提出了设备独立像素。原本是1物理像素对应1px，现在是1独立像素对应1px，再用像素比乘设置的px(如320px)，就可以显示出对应设备的像素了。

所以开发中css使用px对应独立像素即可，比如：不管ip3还是ip4，他们的设备独立像素都是320px,那么开发中320px宽的div就能占满2种屏幕。因为在ip3中规定了像素比是1，所以320*1=320，ip4规定了像素比是2，320*2=640，还是占满了屏幕。