1、前言：
讀完本文你會學到什么：
- dp(device pixels)
- px(css pixels)
- pt(point)
- ppi(pixels per inch)
- dpi(dots per inch)
- dpr(device pixels ratio)
- dip(device independent pixel)
讀本文你需要掌握哪些基本知識：
- 1in(英寸) == 2.5399999961392cm
- 常常用1英寸等於2.54厘米
- 1m == 3尺
- 1尺 == 10寸
- 1寸 == 3.33333333cm
- iphone6屏幕4.7寸是指屏幕對角長度為4.7英寸
- iphone6的高寬比為 iphone6_height : iphone6_width = 16 : 9
2、dp(設備像素)
2.1、說明
dp是設備像素，也叫物理像素，顧名思義，他就是指一個物理發光點的單位。
iphone6官方在產品說明書上寫的屏幕分辨率為1334x750像素指的是物理分辨率。
也就是高1334dp，寬750dp。
3、px(邏輯像素)
3.1、說明：
px是邏輯像素，邏輯像素是相對的單位。
在每個設備上對應的dp是不一樣的是不一樣的，在相同設備上對應的dp也可以不同。
這就是為什么我我們的圖片可以放大縮小的原因。
4、pt(點)
4.1、說明
pt是專用的印刷單位“點”，這個單位是絕對單位.
1pt == 1/72in
5、ppi(每英寸的像素)
5.1、說明
ppi指的是單位英寸長度上的平均孔數
iphone6官方在產品說明書上寫像素密度為326ppi，指的就是在它的1in == 326dp
5.2、計算iphone6的像素密度
先通過iphone6的對角4.7in和高寬比可以算出高和寬：
iphone6_width = 2.304227826273027in = 2.3in
iphone6_height = 4.096405024485382in =4.1in
再然后通過這個寬高和屏幕物理分辨率可以算出ppi
iphone6_width_ppi = 750dp/2.3in = 326.0869565217391ppi
iphone6_height_ppi = 1334dp/4.1in = 325.3658536585366ppi
可以得出寬和高都是非常近似的等於326dp的
6、dpi(每英寸的點數)
6.1、說明
dpi是輸出設備的物理能力
例如：300DPI的油墨打印機是指每英寸有300墨滴用於打印機，每英吋能印出的點的數目為300。
“像素”（p）只存在於計算機顯示領域，而“點”（d）只出現於打印或印刷領域。
6.2、注意
在顯示器中ppi和dpi是同一概念
7、dpr(devicePixelRatio)
7、1說明
window.devicePixelRatio是設備上物理像素和邏輯像素的比例。
dpr不是單位，是一個屬性，在瀏覽器中通過 window.devicePixelRatio 獲取屏幕的DPR。
在用微信開發者工具開發小程序的時候，在切換模擬器的時候可以看到各個設備的dpr，iphone6的設備dpr為2
8、dip(設備獨立像素)
8、1說明
是由谷歌推出用來適配各個安卓屏幕差異的。
在定義UI布局時，應該使用一個虛擬像素單元，以一種密度獨立的方式表示布局維度或位置。
密度無關的像素相當於一個物理像素在160 dpi屏幕上，這是系統為“中等”密度屏幕所假設的基線密度。
在運行時，系統會根據實際的屏幕密度，透明地處理dp單元的任何擴展。將dp單元轉換為屏幕像素很簡單：px=dp（dpi/160）。
例如，在240 dpi屏幕上，1 dp等於1。5物理像素。在定義應用程序的UI時，應該始終使用dp單元，以確保在具有不同密度的屏幕上正確顯示UI。
就是說在160dpi的屏幕上，1dip=1px。
它跟屏幕密度有關，如果屏幕密度大，1dip代表的px就多，比如在320dpi的屏幕上，1dip=2px。
9、彩蛋
9.1、viewport
viewport是用戶網頁的可是窗口。
手機瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中，通常這個虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的布局），用戶可以通過平移和縮放來看網頁的不同部分。
9.2、實例代碼
<meta name="viewport" content="width=device-width, initial-scale=1.0">
具體值含義可以參考我之前寫的你絕對不知道的head標簽