一切都從「像素」開(kāi)始...
從維基百科詞源可知，像素
pixel一詞由pictures和element兩個(gè)詞的簡(jiǎn)寫形式pix和el結(jié)合而來(lái)。
像素，在數(shù)字成像中是不可分割的最小單元，可分為兩類：
- 虛擬像素：其大小是任意的、可變的，沒(méi)有實(shí)際的物理尺寸大小。
- 物理像素：通常用于描述手機(jī)、電腦、顯示器等設(shè)備的像素，它在設(shè)備出廠時(shí)已經(jīng)確定，是不可變的，具有實(shí)際的物理尺寸大小（一般使用英寸表示）。
物理像素（即屏幕像素，screen pixel）是顯示設(shè)備成像的最小單位。我們「肉眼」看到的物理像素都是真實(shí)的物理發(fā)光元件，既然是物理元件，就不可能「無(wú)縫」填滿整個(gè)屏幕，而且像素（即元件）大小、形狀也是可以自由定義的，在屏幕上多是方形或者接近方形的。兩個(gè)相鄰像素之間的距離就是點(diǎn)距（dot pitch），點(diǎn)距越小成像越細(xì)膩，近距離使用體驗(yàn)越好。
但并不是說(shuō)像素緊密排列就意味著「視覺(jué)效果」更好，比如說(shuō)戶外碩大的 LED 廣告牌，是可以明顯地看到黑色縫隙的，原因是它們的元件排列是有間隙的。
虛擬像素到物理成像，是有一定的映射關(guān)系的，具體由顯示設(shè)備或打印設(shè)備來(lái)決定。
分辨率
我們發(fā)現(xiàn)，通常描述「分辨率」的單位也叫像素，但有什么區(qū)別呢？
-
物理屏幕分辨率（Physical screen resolution）：泛指電視機(jī)、電腦顯示器、手機(jī)屏幕等顯示設(shè)備的分辨率，它在設(shè)備出廠時(shí)便以確定，不可修改，而且是有著具體的物理尺寸大小。
常說(shuō)的 1920 × 1080 分辨率的手機(jī)，指的是顯示器橫向排列了 1080 個(gè)像素，縱向排列了 1920 個(gè)像素。
-
顯示分辨率（Display resolution）：也稱作屏幕分辨率（screen resolution），它沒(méi)有具體的物理大小，是可以修改的。
常說(shuō)的“調(diào)節(jié)電腦屏幕分辨率”，修改的就是顯示分辨率。當(dāng)顯示器分辨率與屏幕分辨率一致時(shí)，表示一個(gè)虛擬像素將會(huì)用一個(gè)物理像素來(lái)顯示，此時(shí)顯示效果是最佳的。當(dāng)二者不相同時(shí)，將有相關(guān)系統(tǒng)使用算法去模擬像素，而這些模擬處理都會(huì)帶來(lái)畫質(zhì)的損失。
還有很多分類，比如 Image resolution、Printing resolution、Sensor resolution 等等，詳看 Wiki。
以上描述源自。
請(qǐng)注意，不能單憑顯示器分辨率來(lái)計(jì)量屏幕的細(xì)膩程度。試想，同樣是 1920 × 1080 分辨率，一個(gè)放在 5.5 英寸的手機(jī)屏幕上，一個(gè)放在 40 英寸的電視機(jī)屏幕上，細(xì)膩程度會(huì)一樣嗎？
屏幕尺寸
這玩意本來(lái)就是外國(guó)人發(fā)明的，因此常用單位「英寸」來(lái)描述。單位換算：1 英寸 = 2.54 厘米（cm）。
請(qǐng)注意，英寸是「長(zhǎng)度」單位，而不是「面積」單位。
比如 4.7 英寸的手機(jī)，這里的 4.7 英寸指的是手機(jī)顯示屏「對(duì)角線」的長(zhǎng)度，而不是顯示器的寬度或者高度，更不是面積。對(duì)，就是數(shù)學(xué)中直角三角形的那個(gè)斜邊，勾股定理還記得吧。
下文將會(huì)提到的像素密度（PPI）表示「每英寸」屏幕所擁有的像素?cái)?shù)，也是指對(duì)角線的長(zhǎng)度，而非面積大小。
像素密度
像素密度（Pixel density），通常用來(lái)計(jì)量電子設(shè)備屏幕細(xì)膩程度。
像素密度的單位一般是 PPI（Pixel Per Inch，每英寸像素），表示單位長(zhǎng)度上的像素?cái)?shù)量（注意，不是單位面積的像素?cái)?shù)量）。
電子設(shè)備的 PPI 取決于「屏幕尺寸」和「顯示器分辨率」，計(jì)算規(guī)則如下：
其中，
-
dp為屏幕對(duì)角線的分辨率 -
di為屏幕對(duì)角線的長(zhǎng)度（單位為英寸） -
wp為屏幕橫向分辨率 -
hp為屏幕縱向分辨率
以 4.7 英寸的 iPhone 7 為例，分辨率為 750 × 1334，像素密度約為 326PPI（在線換算）。需要注意的是，應(yīng)以設(shè)備「實(shí)際尺寸」換算，而非廠商「宣傳尺寸」，二者之間可能會(huì)有一定的偏差，自然計(jì)算結(jié)果就會(huì)產(chǎn)生誤差。比如：
「數(shù)碼相機(jī)」與手機(jī)等屏幕不同的是，數(shù)碼相機(jī)的屏幕通常用「點(diǎn)色數(shù)」來(lái)描述，而不是像素。每個(gè)像素包含了三個(gè)點(diǎn)色數(shù)（分別是紅、綠、藍(lán)三原色）。以佳能 50D 相機(jī)顯示屏為例，它有 920,000 個(gè)點(diǎn)色數(shù)（應(yīng)該是約數(shù)），即 92 萬(wàn)色，通過(guò)這個(gè)數(shù)據(jù)，可以推算出屏幕為 307,200 個(gè)像素，分辨率為 640 × 480。因此，相機(jī)顯示屏的點(diǎn)色數(shù)和像素常被人混淆（源自維基百科）。
還有，用于量度「打印機(jī)」打印精細(xì)程度的計(jì)量單位是 DPI。
DPI（Dots Per Inch，每英寸點(diǎn)數(shù)），表示單位長(zhǎng)度上可打印的點(diǎn)數(shù)。
雖說(shuō) PPI 和 DPI 兩者所用的領(lǐng)域存在區(qū)別，「像素」只存在于屏幕顯示領(lǐng)域，而「點(diǎn)」只出現(xiàn)于打印或印刷領(lǐng)域。但由于 PPI 也會(huì)影響到圖片的打印質(zhì)量，因此容易出現(xiàn)混用或混淆的情況。比如，在 SONY Support 的一篇文章中指出：
Much of the confusion between these two terms happens for a couple of reasons. First, even though PPI refers to the resolution of an on-screen digital image, it can also affect the quality of the final printed picture. Second, even some professional print services request that pictures must be at a certain DPI level before they can be printed; what they normally mean is PPI, not DPI - thus, this adds to the confusion.
由于本文的重點(diǎn)討論的是顯示屏幕領(lǐng)域像素之間的關(guān)系，而非打印領(lǐng)域，加之本人對(duì)此并不是很了解，因此不作過(guò)多介紹，點(diǎn)到為止，哈哈！
設(shè)備獨(dú)立像素
DIP（device-independent pixel，設(shè)備獨(dú)立像素；density-independent pixel，密度獨(dú)立性），是一種長(zhǎng)度單位， 常見(jiàn)簡(jiǎn)寫形式為 DP 或 DIP。
在 Android 開(kāi)發(fā)中很常見(jiàn)，一種基于屏幕密度的抽象單位，這些單位與 160 dpi 屏幕相關(guān)（通常 Android 設(shè)備的分辨率是 160 的整數(shù)倍）。在 Android 操作系統(tǒng)上，1dp 相當(dāng)于 160dpi 屏幕上的一個(gè)物理像素，dp 與物理像素的比例會(huì)隨著屏幕密度而變化，但不一定成正比。
而在 Web 設(shè)計(jì)中應(yīng)以 px 作為單位。其中 Material Design 設(shè)計(jì)指南中表示：
When designing for the web, replace dp with px (for pixel).
CSS 像素
我們知道，Web 標(biāo)準(zhǔn)由 W3C（The World Wide Web Consortium） 制定，在 CSS 標(biāo)準(zhǔn)中，長(zhǎng)度單位包括「相對(duì)長(zhǎng)度」和「絕對(duì)長(zhǎng)度」兩類。其中 px 是絕對(duì)長(zhǎng)度單位之一（詳見(jiàn)），
但真的「絕對(duì)」嗎？
網(wǎng)上很多文章提到 px 歸為「相對(duì)單位」， 原因有二：
- 不加思索，人云亦云。
- 所選參照物不一樣。由于 CSS 像素與物理像素不一定是 1 : 1 的關(guān)系，它跟屏幕的像素密度有關(guān)，比如在 iPhone 7 下 1 × 1 的 CSS 像素，將會(huì)使用 2 × 2 個(gè)物理像素去渲染。在 Web 領(lǐng)域通常使用「設(shè)備像素比」（Device Pixel Ratio，DPR）去描述 CSS 像素與最終顯示成像的關(guān)系。
我看到一句話「A pixel no longer equals a pixel」，在當(dāng)下高清屏大行其道的時(shí)代，這句話就成立了，一個(gè)虛擬像素不再等于一個(gè)物理像素。
未完待續(xù)...
