詳解px,dp,pt,sp,ppi,dpi及屏幕適配

本文結構如下：

px：

像素，構成圖片的最小單位，也是設計的最小單位；

像素沒有固定的物理長度，例如iPhone3和iphone4的物理尺寸完全一樣，但是iPhone3的解析度為480*320px，而iphone4的解析度為960*640px。

              

英寸：

固定的物理長度，1英寸=25.4毫米。

 

dpi：

屏幕點密度,我們可以將屏幕理解為是由一個又一個點組成的，dpi就是每英寸（長度）所包含點的數目；

dpi我們用的不多，只需了解即可。

 

ppi：

屏幕像素密度,即每英寸（長度）所包含的像素點數,該值越高，則屏幕越細膩；ppi可以用以下公式計算：

 

             

這個公式其實就是運用勾股定理算出手機對角線上有多少像素點，再除以手機對角線的長度，從而得到每英寸長度上所包含的像素點數。

我們用iphone6進行舉例：

根據蘋果官方數據，iphone6屏幕尺寸為4.7英寸，解析度為750*1334，PPI為326；

根據上計算公式，將解析度（px），屏幕尺寸（英寸）帶入數據得：

      

pt：

有兩種，第一種是來自於印刷行業，它是絕對長度單位，1pt=1/72英寸，約等於0.35毫米，在Photoshop,word中用於對文字大小進行描述，中文翻譯為「磅」。

另一種就是作為IOS開發中的最小開發長度單位，1pt表示屏幕像素點密度為163ppi時，1px的長度；因此pt也有自己固定的物理長度，1pt=1/163 英寸，約等於 0.156毫米。

dp：

安卓開發中的最小長度單位，1dp表示在屏幕像素點密度為160ppi時1px長度。

sp:

安卓的字體單位，和dp類似，表示當屏幕像素密度為160ppi，且字體大小為100%時，1sp=1px。

開發中為什麼用pt,dp而不用px？

既然有px，為什麼安卓和IOS要自己創建一個單位呢？

前面說過，px沒有固定的物理長度，如果用px作為設計單位，那麼在屏幕像素密度（ppi）不同的情況下，圖片顯示的大小是不一樣的。

以IOS手機屏為例，以下是兩塊物理尺寸相同的屏幕，都由10個點（pt）組成，如果我們用像素（px）為單位，那麼同樣為8*8px的圖，在PPI不同的情況下，在兩塊屏幕上的展示情況如下：

那麼問題來了，設計師出圖的時候，仍然以px為單位，那麼我們該如何保證圖片大小一樣呢？

1倍圖，2倍圖，3倍圖：

我們不要忘了，設計師在出圖的時候，會輸出1倍圖，2倍圖，3倍圖；這裡的1倍，2倍，3倍就是指屏幕中一個點（pt）中有1個像素，2個像素或3個像素。

接著上圖的例子，我們在1pt=1px的時候用1倍圖，在1pt=2px的時候用兩倍圖，這樣，在屏幕上顯示圖片的大小就一致了：

我們該如何判定什麼時候用1倍圖，什麼時候用2倍圖呢？

IOS規定屏幕ppi為163時，1pt=1px，此時用1倍圖，我們只需要看IOS手機屏幕的ppi和163的比值就行了（ppi的計算公式上面有）

同樣的，安卓規定屏幕ppi為160時，1pt=1px，我們只需要看屏幕ppi和160的比值即可，設計師一般會根據其手機像素密度，切5套圖（安卓品牌過多，這裡不舉出具體型號）：

適配的原因

適配是為了讓同一個界面在不同尺寸、不同解析度的設備上具備相同的顯示效。

前文說了，設計師在出圖的時候，會根據屏幕ppi不同，已經輸出了1倍/2倍/3倍圖，為什麼還需要適配呢？

我們以iphone5和iphone6舉例，iphone5和iphone6的ppi一樣，也就是說iphone5和iphone6屏幕上一個點都對應2個像素，而這兩種型號也都使用兩倍圖，因此一個圖片在兩塊手機屏幕上展示出的物理大小也是一樣的；但是iphone5和iphone6的屏幕的物理尺寸不同：

iphone5的物理尺寸是4.0寸，iphone6的尺寸為4.7寸，因此還需要進行適配，以此來對屏幕中圖像進行調整。

適配原則

適配的原則其實很簡單，就一句話：將所有要適配的圖放在同一倍率下，組件的尺寸和高度（多數情況）不變，改變組件的間距即可。

剛看到這句話可能會不太明白，我分情況舉例來說明：

1.改變間距

這種情況多適用於組件類，比如頂部搜索框，底部菜單欄等；底部菜單內的icon尺寸保持不變，改變icon的間距即可。

2.等比縮放

這種情況多適用於圖片，宮格類的元素，根據屏幕尺寸比例，進行等比縮放即可。

全面屏適配

為了追求更高的屏佔比，蘋果自iphoneX起陸陸續續推出了全面屏，如果我們不進行適配，可能就會出現按鈕被iphoneX底部的Home Indicator 遮擋的情況：

全面屏的適配也簡單，全面屏和普通屏的區別在於全面屏頂部有劉海，底部有Home Indicator，頂部劉海區高度為44pt，底部Home Indicator高度為34pt，我們只需要在頂部，底部分別預留出44pt、4pt，這樣就可以保證頁面的內容不會被遮擋。

以上就是關於適配的原則和名詞解釋，參考書籍：《爭論點》，若有不正確的地方，歡迎指正，共同進步。

——————————END——————————

往期文章

如何對打雜說：「NO」

需求分析與需求優先級排列模型

   產品經理的自我修養（項目管理）

   產品經理的自我修養（用戶訪談）

如果有用，幫忙點個「再看」哦~