概述

屏幕分辨率、設備像素（device-width）和CSS像素（width）這些術語，在非常多語境下。是可互換的，但也因此easy在有差異的地方引起混淆，實際上它們是不同的概念。

屏幕分辨率和設備像素是物理概念，而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

響應式設計：理解設備像素，CSS像素和屏幕分辨率