像素和屏幕分辨率

在講解響應(yīng)式設(shè)計技術(shù)之前，需要先了解物理設(shè)備中關(guān)于屏幕適配的常用術(shù)語，比如像素，屏幕分辨率，設(shè)備像素(device-width)和CSS像素等，有助于讀者理解響應(yīng)式設(shè)計的實現(xiàn)過程。

1.像素與分辨率

全稱為圖像元素，是網(wǎng)頁布局的基礎(chǔ)，一個像素就是計算機屏幕能顯示一特定顏色的最小區(qū)域。屏幕分辨率，就是屏幕上顯示的像素個數(shù)，以水平分辨率和垂直分辨率來衡量大小。例如：分辨率1600*1200的意思是水平方像素為1600個，垂直方向像素為1200個，屏幕尺寸一樣的情況下，分辨率越高，顯示效果就越精細(xì)。響應(yīng)式布局手機屏幕分辨率的效果如圖6-35所示。

2.設(shè)備像素

設(shè)備像素是物理概念，指的是設(shè)備中使用的物理像素。比如iPhone5的屏幕分辨率640*1136px。衡量一個物理設(shè)備的屏幕分辨率高低，使用ppi，即像素密度，表示每英寸所擁有的像素數(shù)目。ppi的數(shù)值越高，代表屏幕能以更高的密度顯示像素。

3.CSS像素

CSS像素是網(wǎng)頁編程的概念，指的是CSS樣式代碼中使用的邏輯像素。在CSS規(guī)范中，長度單位可以分為兩類，即絕對(absolute)單位和相對(relative)單位。px是一個相對單位，相對的是設(shè)備像素(evice pixel)。

設(shè)備像素和CSS像素的換算是通過設(shè)備像素比完成的，設(shè)備像素比即縮放比例，獲得設(shè)備像素比后，便能知道設(shè)備像素與CSS像素之間的比例。當(dāng)這個比例為1:1時，使用1個設(shè)備像素顯示1個CSS像素；當(dāng)這個比例為2:1時，使用4個設(shè)備像素顯示1個CSS像素，當(dāng)這個比例為3:1時，使用9個設(shè)備像素顯示1個CSS像素。關(guān)于CSS像素和設(shè)備像素之間的換算關(guān)系，不是響應(yīng)式網(wǎng)頁設(shè)計的關(guān)鍵知識內(nèi)容，了解相關(guān)基本概念即可。