H5開發基礎之像素、分辨率、DPI、PPI
html5
2016-09-03於壩上草原
背景知識：
目前絕大部分顯示器都是基於點陣的，通過一系列的小點排成一個大矩形,通過每個小點顯示不同的顏色來形成圖像，我們把每個小點稱為一個像素 (pixel)。
概念點：
1. Dot：物理屬性的一個點，打印機或屏幕通過這些點把圖片print出來。一塊屏幕的Dot的點是固定的。對於一台具體的顯示器，多個點(dots)排列起來之后，構成的一個整體的寬度和高度，我們稱之為顯示器的“物理尺寸 (physical size)”，單位是“寬度x高度”，例如 12"x7.5".
2. Pixel：像素，是一個帶顏色的方塊，一個Pixel可能由很多個物理Dot組成。在具體設置下，顯示器有多少行多少列像素叫做顯示器的“分辨率 (geometry)”，表示方法是“寬度像素個數x高度像素個數”，例如 1440x900.在同樣的分辨率下，每個小點(dots)的尺寸仍然是可以大可以小的。同樣是 900 個點，如果每個點 1 毫米，那就是 90 厘米，如果每個點 1 厘米，那就是 9 米。
3. DPI：dots per inch，稱作解析度，一英寸里能包含的Dots的個數，這個像素指的是物理像素，實際存在的。
4. PPI：pixels per inch，每英寸有多少個pixel。PPI=像素數量（√（x²+y²））/物理尺寸（英寸數），x是x軸上的像素數，y是y軸上的像素數，要用對角線來計算，是因為屏幕對角線長度（屏幕尺寸，物理尺寸）是廠商制造時就定好的精確數值。
5. DP：Device independent Pixel（設備獨立像素）的縮寫，也可叫DiP，1dp表示在屏幕像素點密度為160ppi時1px長度，是andriod的概念。
6. PT：point，是一個長度單位，通用標准是 1 pt = 1/72 inch（1 inch = 2.54 cm），這個標准又稱PostScript point，Point 和厘米、毫米什么的單位沒有本質區別，只是長度不同，pt和屏幕沒關系，只和文檔分辨率有關系，是蘋果的概念。
7. DP和PT是用來定義應用在不同設備、不同DPI下的標准單位。
8. Px: css pixels邏輯像素，瀏覽器使用的抽象單位
9. DPR：device pixel ratio，設備像素縮放比，平面上：1px = (dpr)^2 * dp，緯度上：1px = dpr * 2
例：iphone5：分辨率640px * 1136px，PPI：326PPI，dpr圖表可得iphone5的dpr為2, 根據緯度上：1px = dpr * px, iphone5的屏幕為320px * 568px.
10. 屏幕分辨率
分辨率就是屏幕上的像素數，例如2560×1440px的屏幕，屏幕橫向有2560個像素，縱向有1440個像素。27"顯示器有2560×1440px的點對點分辨率，109PPI。如果把屏幕分辨率調低，會發現屏幕上的窗口、icon都變大了，因為27"上的像素變少了。其實像素還是那么多像素，PPI還是那個PPI，像素變少是因為當你把屏幕分辨率調低時，操作系統會通過拉伸來填充屏幕，這個時候CPU/GPU會用點對點的像素計算出來一套新的分辨率。
屏幕：
HD：1280 * 720px分辨率
full HD: 1920 * 1080px分辨率
4K: QHD或者UHD（超高清）,最小分辨率是3840×2160px,另一個常見分辨率是4096×2160px
視網膜屏：Retina是一種規格，是通過減小像素的體積和像素之間的間距，大幅提高屏幕的ppi值。Retina屏dpr大於等於2。