在基於屏幕的設計中，像素一直都是最小的單位。由於它不可分割，因而就成為設計師賴以度量屏幕距離的有形單位。以前總聽人說：“一個像素是一個像素是一個像素。”這句話意在幫助不習慣固定屏幕密度的平面設計師理解像素的概念。由於存在這種一致性，Web設計師同樣采用像素而不是點或其他單位來構建網站。
現在，隨着硬件的發展，像素密度在增長，很難再像以前一樣把像素作為一個可靠的單位。瀏覽器縮放是另一回事，QuirksMode的這篇文章里有介紹。在如今的高分辨率設備上，像素到底指什么呢？為什么分辨率為640px × 960px的iPhone 4在瀏覽器里聲稱自己是320px × 480px？事實上，有兩種不一樣的像素定義：一是指屏幕可以達到的最小單位（硬件像素），二是指視覺上一致的“參照像素”。
硬件像素
我們大都熟悉硬件像素。硬件像素是顯示屏上能夠顯示的最小的點，通常由紅、綠、藍三個子像素構成。從這三個子像素中穿過的光線混合起來，為我們創造了一個像素的顏色。硬件像素與屏幕上的物理元素一一對應，不能拉伸、扭曲，也不能再分。這些特點讓硬件像素很像原子——任何設計作品中最基本的單位。
參照像素和分裂原子
像素的概念在發生變化。W3C為所有基於像素的度量定義了一個標准，叫參照像素。於是，所有基於像素的設計不必局限於硬件像素，而是向一個基於視覺參照的單位靠攏。這個參照像素有可能等於硬件像素的兩倍。在任何閱讀場景下，這種像素都應該看起來一樣大。使用參照像素的關鍵在於把屏幕尺寸作為上下文。同樣是參照像素，在手機上就小，在投影中就大。如果你同時拿着手機，又看着投影，那么無論設備的分辨率如何，像素密度是否有差異，像素看起來都應該是一樣大的。如果能夠得到一致遵行，這個標准將使像素在任何設計作品和任何平台上都保持一致，不管像素密度有多大，也不管觀看距離有多遠。
參照像素的確很棒，可現在又有了一個不同的定義。Android設備有一個新單位，叫做“密度無關像素”（density independent pixel）簡稱dip。開發人員可以使用它來區分某個元素占據的可見像素數量。這樣，使用px就可以基於硬件像素來顯示銳利的圖片和圖案，使用dip則可以動態調整文本大小或跨設備保持某些部分一致。把一個像素的定義分成兩個，對於Android而言很合適。但Web呢？幾年內仍然會繼續在各種設備中沿用基於像素的設計。在Web開發中也使用這些單位固然好，但如果不徹底改變大家當前對像素的理解，那只能破壞Web。想象一下，如果iPhone 4告訴網站它自己的實際寬度是640px，那么文本就會變成原來的一半大——當然是在沒有縮放的情況下。而此時的網站就幾乎看不清啦。所有禁用了縮放的移動網站就全都變成了廢物。
圖1：Galaxy Tab和Kindle Fire中的標准像素大小
我們同樣不完全清楚每種設備如何處理像素，這就可能導致問題。比如，最早的Galaxy Tab和Kindle Fire的屏幕尺寸及分辨率都一樣，但Tab的像素根據參照像素進行了調整，每個像素是Fire的1.5倍大，Fire沿用的是硬件像素。於是，必須得對所有設備逐一進行測試，畢竟說明書中所提到的都只是硬件像素。看到這兩台設備的說明，開發人員會以為屏幕一樣大，而且瀏覽器內核都是WebKit，那么網站呈現就會一樣。可惜，事實並非如此。對於任何網站來說，Galaxy Tab是400px × 683px，而Kindle Fire是600px × 1024px。
確定斷點，解決問題
沒錯，像素出問題了。可是，我們能通過媒體查詢檢測到這種不一致，然后進行相應調整。具體來說，可以使用device-pixel-ratio來檢測像素的縮放比例。再輔以檢測分辨率，就能夠在某種程序上確定設備類型。iPhone 4的device-pixel-ratio值是2，即iPhone 4中的一個像素等於兩個硬件像素。很多Android設備的device-pixel-ratio是1.5，因此一個像素等於1.5個硬件像素。目前，使用device-pixel-ratio時還是需要加廠商前綴，但無論如何，有了它就可以檢測設備是否縮放像素了。
在確定設備類型時，專有特性是關鍵，但也要注意不能過分針對某款設備，以防其他設備也存在類似特性。比如最初的Galaxy Tab及類似設備，device-pixel-ratio等於1.5只是條件之一。今天，大多數Android手機的device-pixel-ratio也是1.5，這種沖突會引入其他麻煩。通過查詢兩個方向的device-width才會知道它比手機大，但不會大到超過將來會出現的其他平板。使用device-width可以知道屏幕分辨率，而width和height返回的只是視口的寬度和高度。基於設備的這個指標，就可以很好地確定用戶使用的設備類型。
@media screen and (device-pixel-ratio: 1.5)
and (device-width: 683px)
and (orientation: landscape),
screen and (device-pixel-ratio: 1.5)
and (device-width: 400px)
and (orientation: portrait)
注意，device-pixel-ratio是需要廠商前綴的，因此-webkit-和-o-是對Webkit和Opera瀏覽器有效的。
下面我們再檢測類似Kindle Fire的設備，它們與Tab的硬件分辨率相同，所以可以使用硬件像素。這種設備很難跟上網本及其他屏幕較大的設備乃至擁有相同分辨率的iPad區分開。使用媒體查詢特性orientation和max-device-height可以針對我們想檢測的設備。這些設備的高度通常會小於device-height的實際值，因此為了避開1024 x 768的平板，把600像素以下作為條件即可。這樣，就可以找到分辨率和大小都一致的同類設備了：
@media screen and (device-pixel-ratio: 1)
and (device-width: 1024px)
and (max-device-height: 600px)
and (orientation: landscape),
screen and (device-pixel-ratio: 1)
and (device-width: 600px)
and (max-device-height: 1024px)
and (orientation: portrait)
圖2：Galaxy Tab和Kindle Fire上正常化的像素
使用em而不是像素不僅僅有利於縮放字形，還能更好地控制站點的縮放。你要做的就是修改html元素的font-size值。要讓網站在Kindle Fire中的效果看起來與Galaxy Tab中一樣，只要在Kindle Fire的媒體查詢中把基准大小乘以3/2 （1.5）即可。如果你想在Galaxy Tab上使用基於硬件的像素，那就在它的媒體查詢中將基准大小乘以2/3（.666667）。因為一切都基於em，那么整個站點自然會相對於基准font-size縮放。這個Gist是一個完整的例子。根據上下文修改它，可以改進跨平台的一致性。
要理解多個像素定義需要下一番功夫。像素本來是最基本的單位，而給它賦予視覺上一致的意義導致了理解上的困難。設備廠商在解決這些問題方面也做了很多工作，為我們節省了時間，但各種問題在所難免。無論如何，只要始終關注這個領域，我們一定會有辦法發現和解決這些問題。