像素和屏幕分辨率

在講解響應式設計技術之前需先了解物理設備中關于屏幕適配的常用術語

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


1.像素與分辨率


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


2.設備像素


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


3.CSS像素


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


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