概述
在本篇文章的開始，我先為大家解釋一下這三個名詞的概念。
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，自適應式建站，響應式建站。
篇幅所限，在下一章中再來討論。
參考資料
- 市場常見屏幕尺寸以及分辨率：https://wenku.baidu.com/view/42bedab284254b35effd3416.html
- 為什么同樣大小的像素在移動端和pc端看起來不一樣:https://www.jianshu.com/p/4583755b4f69