最近被一朋友問到：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的元素等高。
這些都是基礎概念，並沒有對前端開發過程中如何自適應做介紹，打算下一篇文檔介紹一下。