响应式设计：理解设备像素，CSS像素和屏幕分辨率

概述

屏幕分辨率、设备像素（device-width）和CSS像素（width）这些术语，在很多语境下，是可互换的，但也因此容易在有差异的地方引起混淆，实际上它们是不同的概念。

屏幕分辨率和设备像素是物理概念，而CSS像素是WEB编程的概念；屏幕分辨率和设备像素的差别在于设备像素显示密度。

当设备屏幕ZOOM=100%的时候，浏览器CSS像素尺寸和设备像素相等，而当像素密度(pixel density)为1的时候，屏幕分辨率和设备像素相等。

响应式设计

在响应式设计中，使用了viewport,device-width,media query,width这些概念，web程序员需要准确理解其中的细微差异。

media query来探测屏幕尺寸，device-width以设备像素计算屏幕宽度，width以CSS像素计量总的页面宽度（在iPhone中，最小为980px）。

viewport指的是浏览器通过宽度比例来计算元素尺寸的一块区域，通常比屏幕大一点。

而如下meta标签，将使得viewport区域适配于设备像素宽度（在iPhone中，一般为320px）。

<meta name="viewport" width="device-width">

在没有使用meta标签前，以踏得网在iPhone5上为例，页面看起来会是这样的（计算元素尺寸时使用了较大的CSS像素宽度）：

显然是因为把640px的内容压缩到了320px物理屏幕上来显示而导致的问题。

而添加meta标签后，变为如下正常显示（计算元素尺寸时使用了设备像素）：

iPhone4的特例

苹果iPhone4采用了新的显示技术，宣称640px的分辨率，但需要注意的是，其实际设备像素宽度仍然是320px，

有些设备在media query时返回的是屏幕分辨率而不是设备像素宽度，这些情况导致了网页设计上的不一致。

解决方案和DIPS

Google引入了一个dips（device-independent pixels）的中间概念，web开发人员只需要处理DIPS，究竟屏幕能显示多少内容，而无需关心实际屏幕分辨率，这是好的技术方向，将有助于消除新的硬件显示技术给media query编程带来的混乱。

by iefreer