最近被一朋友問到：css中設置一DOM的height：65px，請問顯示的高度是否和Android的65dp的元素等高？腦子裏瞬間閃現了一堆的概念，如dpr，ppi，dp，pt等，然而想了一陣，漿糊了，所以重新梳理了相關的知識，以備不時之需。

　　1.ppi

　　ppi指Pixels Per Inch也就是每英寸的像素點，此處的像素點就是物理像素點（也就是最小的顯示單元）。 ppi描述的是像素的密度，滿足以下公式

此圖來源於uxabc（https://medium.com/uxabc/understanding-ui-units-8acdc0575388）

2.iPhone的pt與Android的dp

　　第一代iphone手機的像素密度是163ppi，但是到了iPhone4的時候像素密度是326ppi，開發者發現初代的1px和iphone4下的1px顯示尺寸不相等了，無疑將增加適配的工作量，於是iphone開發者提出了一個pt的概念，即采用初代iphone1個像素點的大小作為基準，記作1pt（point），也就是說1pt在iphone4下的大小=2px的寬高。

　　同樣Android開發者也遇到了同樣的問題，google提出的解決方案是dp（Density-Independent Pixels），基準是160ppi下的1px代表的尺寸；

　　總之，pt和dp起著同樣的作用，就是把它當做設計和顯示的基本單位，避免使用px引發適配問題。

3.pt、dp與px之間的關系

　　根據上面的描述，我們可以知道iphone4下1pt=2px，因為iphone4是326ppi，正好是基準的兩倍；但是iphone6+是401ppi，那在iphone6+下1pt等於多少px呢？大多數開發者都知道是3px，可是為什麽呢？我找到一個比較形象的示意圖：

　　按照圖中所示，設計圖都是按照pt來設計的， 設計圖的標準是：x1，x2和x3，也就是設計圖的像素為320x480，750x114，1242x2208，但是由於工藝原因，iphone6+的物理像素（分辨率）達不到1242x2208，所以只能做一次采樣處理（並非縮放，因為顯示尺寸並沒有變化，還是5.5 inch）

4.HTML中的css像素和dpr

　　在HTML中不得不提到viewport，經常會設置viewport的width=device-width，那這個device-width的值是多少呢？

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>　　

　　我們會發現在iphone5下device-width=320，iphone6下是375，iphone6+下是414，那也就是說device-width其實就是NA開發中屏幕寬度有多少pt和dp。

device-width在html中也同樣被解讀為理想（基準）視口的寬度，即320px，375px，414px，這裏的px就是指css像素，通常也被稱為邏輯像素；那我們可以認為html中的css像素的顯示尺寸應該和NA中的pt、dp的顯示尺寸相等。

　　dpr，也被成為device pixel ratio，即物理像素與邏輯像素的比，那也就不難理解：iphone6下dpr=2，iphone6+下dpr=3（考慮的是柵格化時的像素，並非真實的物理像素）;

　　介紹完上面的概念，我們就可以問答一開始的問題了，css中設置一DOM的height：65px，顯示的高度應該和Android的65dp的元素等高。

　　這些都是基礎概念，並沒有對前端開發過程中如何自適應做介紹，打算下一篇文檔介紹一下。

針對iPhone的pt、Android的dp、HTML的css像素與dpr、設計尺寸和物理像素的淺分析