像素密度《响应式网页设计》

resolution 表示设备的像素密度，或者叫屏幕密度，我们先来了解一下什么是像素密度，它表示在一个物理尺寸上面所能显示的像素的数量，一般我们会用 dpi 这个单位来表示像素密度 …

dpi 是 dots per inch 的简写形式 … 也就是每英寸的点数，或者叫每英寸的像素数 …

不同的设备的屏幕密度是不一样的，比如 iPhone 3G 的屏幕密度是 162 dpi … 屏幕的分辨率在垂直方向的时候，宽是320px ，高是 480px。

到了 iPhone 4 的时候，屏幕密度就变成了 326 dpi ，差不多是 iPhone 3G 屏幕密度的一倍，因为密度变大了，所以它能显示的像素数也会变大，

iPhone 4 的屏幕分辨率在垂直方向的时候，宽是 640px，高是 960px 。比 iPhone 3G 扩大了一倍。

因为 iPhone 3G 和 iPhone 4 的屏幕都是 3.5 寸，所以更大的屏幕密度，可以使用更多的像素来显示元素的细节 …. 比如文字，在高密度的设备上，会显示的更清晰。

苹果为这种高密度的屏幕起了个名字，叫 retina ，视网膜屏幕 ….

CSS 像素

另外，我们需要明白什么是 CSS 像素，CSS 像素是一个相对的值，比如你要显示一个方框，大小是 10px x 10px ，这个方框如果在 iPhone 3G 上显示，它的 CSS 像素应该就是你设置的 10px x 10px。

如果在 iPhone 4 上面显示这个方框， CSS 像素就会变成 20px x 20px … 因为 iPhone 4 像素密度比较高，如果使用同样的 10px x 10px 来显示，在 iPhone 4 上，这个方框看起来会比 iPhone 3 上面缩小一倍 …

所以，为了保持元素显示的一致性，高密度的设备会自动去放大元素 … 比如在 iPhone 4 上，这个放大的倍数就是 2 ，这样 10px x 10px 的方框，在 iPhone 4 上的 CSS 像素就会是 20px x 20px 。

要注意是，这个放大的倍数，不同的设备是不一样的，在苹果的视网膜屏幕上，放大的倍数都是 2 。

其它品牌设备，有些会使用 1.5 ，2，或者 3，作为 CSS 像素的放大倍数。

在这个地址里，http://goo.gl/FWJ8

列出了一些相关的信息 …. 你可以找到不同品牌，不同设备的屏幕分辨率，尺寸 … 还有 CSS 像素的放大倍数 …

另外，你也可以参考这个地址 http://goo.gl/snL8f

像素密度