前端認知：PPI、DPI、設備像素等概念

前言

關於PPI、DPI、DPR、物理像素、邏輯像素等這些名詞概念你們有所耳聞，也應該翻找了許多資料，無奈各類資料描述不一，概念混亂，一筆帶過，甚至以訛傳訛。沒有什麼實感去好好理解這些概念。

因而我盡本身所能，儘可能描述，讓你們有個實質性地認識。

像素

小時候學過數學咱們都知道，點成線，線成面。因此在計算機中，一個圖像（面）是有一個個點組合而成的。而這個最小的不可分割的點，就是咱們常說的「像素」，pixel。如咱們常說的分辯率爲1366px*768px，就是指寬有1366個像素，高有768個像素組合而成。

像素是一個抽象的概念，不是一個確切的物理量，而真不是一個「點」，點的描述是方便咱們去理解。

像素是在數字領域（虛擬世界）的一個概念，釐米這些長度是現實世界的一個概念，要從虛擬往現實中轉化對其的認知，須要藉助「圖像分辨率」。
當圖片尺寸以像素（px）爲單位時，咱們須要指定其固定的分辨率，才能將圖片尺寸與現實中的實際尺寸相互轉換。畢竟咱們總不能拿把尺子去計算機屏幕上量200px*100px的圖片多少釐米吧。

這裏說的「圖像分辨率」是要用下面所說的用PPI做爲單位的表達方式。PPI是英寸和像素的關係橋樑，所以能夠把像素往英寸方向轉化。

分辨率

能夠從顯示分辨率與圖像分辨率兩個方向來分類

顯示分辨率

又稱顯示分辨率，是屏幕圖像的精密度，是指顯示器所能顯示的像素有多少。因爲屏幕上的點、線和麪都是由像素組成的，顯示器可顯示的像素越多，畫面就越精細，一樣的屏幕區域內能顯示的信息也越多。

一般用每行像素數數目乘每列像素數目來表示分辨率。如1366px*768px。就是說屏幕水平方向上，有1366個像素點，在垂直方向上，有768個像素點。

屏幕分辯率是機器生產時已經肯定好的了，即已經規定好了機器屏幕上是有多少個像素點組合而成。

但咱們也知道，咱們能夠修改電腦的屏幕分辨率，這是怎麼回事呢？

假設電腦的分辨率是1366px*768px，通常這個爲電腦推薦你的分辨率，若是你私自調整成800px*600px，系統就會分配給你800*600個有效像素個數，也就是真實的色彩塊。其餘的個數呢，就由系統自做主張，經過一系列運算給你一個模擬色彩塊，填充成正好1366*768個色彩塊。

圖像分辨率

圖像分辨率則是單位英寸中所包含的像素點數，其定義更趨近於分辨率自己的定義。

從這個定義上來看很明顯，跟PPI的含義是同樣，因此PPI是用來表示圖像分辨率的單位，如一圖片分辨率爲100ppi，含義是每英寸中所含有100個像素。

跟顯示分辨率同樣，圖像分辨率也能夠用「水平像素數×垂直像素數」來表達。其實咱們知道ppi，也知道圖像的寬高長度（如英寸爲單位），就能算出圖像是由多少個像素組成，即「水平像素數×垂直像素數」。

這裏咱們要知道，圖像的顯示寬高尺寸，不會受到PPI值直接影響，對於計算機的顯示系統來講，PPI是沒意義的，真正起做用的是圖像的「水平像素數×垂直像素數」，只要「水平像素數×垂直像素數」同樣，就算PPI不同，圖片一樣顯示同樣的寬高尺寸。

此外，其實在不一樣的應用領域，圖像分辨率也能夠用不一樣的單位進行描述，如在打印領域中，也能夠用dpi來描述。

分辨率比

這個常見於你用手機看視頻，要求視頻按照什麼比例來展現。例如16:9，就是屏幕的高和寬的像素比例是16:9

屏幕尺寸

在真正瞭解這個含義以前，我常覺得是指屏幕的寬高，就是屏幕的尺寸。實際上，在介紹產品時常說的，手機屏幕尺寸5.3英寸，電腦屏幕多少英寸之類的，不是指屏幕的寬高，而是指屏幕的對角線長度。

像素密度（PPI）

表示每英寸長度上有多少個像素，又叫像素數目。像素越多，表明畫面更細膩更清晰。咱們常說的視網膜屏幕（Retina），就是指PPI較普通屏幕要高。

ppi(pixels per inch)是圖像分辨率的單位，圖像ppi值越高，畫面的細節就越豐富，由於單位面積的像素數量更多。

上述咱們知道了屏幕尺寸是指對角線長度，若是又知道了屏幕的分辨率（即知道了寬高的像素值），那麼寬高和對角線就造成了一個垂直三角形。利用勾股定理，能夠算出對角線的像素值了。而又知道了對角線的英寸值，那麼就能夠算出屏幕的PPI值了

DPI

DPI（Dots Per Inch，每英寸點數）是一個量度單位，用於點陣數碼影像，指每一英寸長度中，取樣、可顯示或輸出點的數目。這裏說的點，相似打印的「墨點」，打印成像是由這些墨點成線，線成面這樣組合而成。

它是一個輸出分辨率（打印分辨率），經常使用於描述打印機的打印精度，通常來講，DPI值越高，代表打印機的打印精度越高。它表示每英寸所能打印的點數，即打印精度

通常的激光打印機的輸出分辨率是300dpi-600dpi，印刷的照排機達到1200dpi-2400dpi，常見的沖印通常在150dpi到300dpi之間。

圖像的像素、打印分辨率和打印尺寸的關係以下：

圖像的橫向（豎向）像素數=打印橫向（豎向）分辨率×打印的橫向（豎向）尺寸

例如：但願打印照片的尺寸是4*3inch，而打印分辨率橫向和豎向都是300dpi，則須要照相機採集的像素數至少爲（300*4）*（300*3）=1080000像素，約一百萬像素。採集的像素數太低（採集圖像機器的PPI決定）會下降圖像的打印質量，太高也不能提高打印質量。

ppi和dpi常常都會出現混用現象。可是他們所用的領域也存在區別。從技術角度說，「像素」只存在於電腦顯示領域，而「點」只出現於打印或印刷領域。

設備像素、設備獨立像素、DPR

設備像素

device pixel(s)，簡稱dp(s)，又稱物理像素。咱們把一臺設備的顯示器，看似一個圖片的話，它要成像，不仍是由一個個最小單位「點」組合成。那這種「點」（其實是機器的發光點，是物理機件），就是設備像素。設備像素在機器生產時就肯定好了，是固定的，不能改變的。

設備獨立像素

device independt pixel(s)，簡稱dip(s)，又稱邏輯像素。首先咱們要知道，爲啥要出現這麼一個概念，身爲前端工程師的你，常寫css對吧，css裏常寫px單位吧。css裏這些px值，就是指的是設備獨立像素。

在沒出現視網膜屏幕前，其實並無設備像素和設備獨立像素的區分，由於他們都是同樣的。你在css裏寫多少px，就是佔用了設備像素多少個像素點。可是當出現了視網膜，甚至更高PPI值的屏幕後，屏幕上分佈的像素點愈來愈多，若是你仍然用css的1px來表示設備上的1px物理像素點，那麼在一個低ppi值的屏幕上和高ppi值的屏幕上，你編寫的一樣一個css裏的px值，在兩個屏幕上顯示就很大差異了，如在低ppi屏上正常顯示，另外一個就會十分小。爲了解決這個問題，就區分出兩個概念了。

設備獨立像素，就是把組成設備顯示的像素點從新編排，這個編排結果符合開發人員認知上的px狀況，而不是設備真實的物理像素。就是在設備像素上抽象了一層，以固定數量的設備像素來表示一個設備獨立像素，從新構成設備顯示的像素點。
所以，咱們寫css時的px值，就是基於這個設備獨立像素上進行的。

至於要以多少個設備像素組成一個設備獨立像素，還引入了一個「設備像素比（Device Pixel Ratio），簡稱DPR的概念來解釋了。

設備像素比（DPR）

記住該公式：

DPR = DP / DIP， 即，設備像素比 = 設備像素 / 設備獨立像素

爲啥要引入該概念呢？ 他主要是告訴設備顯示內容時，1設備獨立像素應該包含多少個設備像素，或者說，多少個設備像素顯示成1個設備獨立像素（即顯示成你css中寫的那個px值）。

如DPR爲2，即1設備獨立像素應該包含2個設備像素。

這樣的話，這就符合咱們編寫css的邏輯了，咱們要求瀏覽器顯示1px寬的內容，所以不論在低ppi設備上仍是高ppi設備上，它仍是顯示成1px（你用開發者工具審查元素看看他的px值，不論在什麼設備都是1px）。可是實際上這個1px的所含的設備像素是不同的。

固然DPR並非開發者所能控制的，是設備生廠商就決定了的。DPR和PPI有什麼關係呢？他們之間沒有很明確的計算關係，畢竟是人爲決定的，他們就把一個DPR值對應着某個範圍的PPI。即生廠商告訴業界人士，ppi達到多少是高清屏，此時對應的dpr是多少。

其實說白了，就是這個DPR比例，設備會根據它來協調設備獨立像素與設備像素的比例關係，讓每一個設備都顯示同樣的設備獨立像素，從而達到咱們css上統一認知的px值。

未經容許，請勿私自轉載