概述

在本篇文章的開始，我先為大家解釋一下這三個名詞的概念。

px全稱為pixel——畫素。pc及移動裝置的螢幕就是通過往畫素矩陣中填充顏色，從而在巨集觀上體現出影象。畫素越小，影象越清晰。

解析度又稱解析度.解像度，其意義為該螢幕中能夠顯示的畫素個數，往往用水平和垂直畫素個數來衡量。

ppi全稱為pixels per inch，意義是每英寸所擁有的畫素個數。由px的定義可以得出，ppi越大，影象越清晰。

px所需要思考的問題

相同的px個數，如10px，在不同型別的顯示螢幕上的物理長度相同嗎？相同的px個數，在不同型別的顯示螢幕中佔的比例相同嗎？

先回答上面的問題——大部分情況下不相同。

為什麼呢？在這裡要明確一點——px不是物理長度單位。其實由我概述中說的：

畫素越小，影象越清晰

就可以看出畫素大小是不確定的。

那麼如何知道該顯示屏下畫素的大小呢——用該螢幕的ppi值計算出來。

公式為：畫素物理長度 = 1/ppi，單位為英寸。

由此，我們可以知道了——當不同型別的螢幕的單個畫素物理長度不同時，相同的px個數物理長度不同。

同時，眾所周知的，解析度有好多種，如1280×720，1920×1080等。例如1280×720，其意義就是該螢幕水平方向由1280個畫素，垂直上有720個畫素。

所以，由此可得——當不同型別的螢幕的水平及垂直方向上的畫素個數不同時，相同的px個數，在該螢幕的水平，垂直方向上所佔的比例是不同的。

通過以上的內容學習，大家應該就能理解為什麼相同的px個數，在不同型別的螢幕下——尤其pc端到移動端——字型大小不同、螢幕邊緣部分留白或過長失真了吧。

但是，光用px來構建網站是遠遠不夠的。因為我們期望的是同一個網站，在不同的終端上有1.一致性，2.響應式——這兩者其實是對立的，一致性是不同終端頁面內容及佈局都是相同的，響應式是根據終端型別改變來改變佈局以使頁面更友好——的特點，不希望有比例失真或螢幕內容過小過大的情況。

而解決這些問題，我們通常使用rem，em，自適應式建站，響應式建站。

篇幅所限，在下一章中再來討論。