像素和屏幕分辨率

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

1.像素與分辨率

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

2.設(shè)備像素

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

3.CSS像素

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

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