本文原文發表於2016年我的github，但是直到現在為止還有很多童鞋問我相關概念，於是整理下再分享一下。
物理畫素（physical pixel）
也叫做：裝置畫素（device pixel）。
可以理解為螢幕上的點，這個是跟硬體有關係，跟Web軟體語言沒一毛錢關係。
你見過霓虹燈嗎？LED燈？對！就是那上面一個個會發光的顆粒。
這個概念大家一般喊中文，貌似沒見過縮寫（當然你可以叫它：pp），因為在軟體方面我們很少關注硬體嘛！自然這個概念也就沒多大用啦！
解析度（resolution）
這也是一個物理概念，其實就是指一個裝置上橫豎的點數。
比如：一個LED燈上面，橫著放3個燈泡，豎著放4個燈泡，那麼這個LED裝置的解析度就是：3 x 4。
當然對應到PC上的顯示器上，或者手機端的螢幕行，這一個個的小點，就不是燈泡啦，而是一種新型的發光原件，而且由於排列密集，所以你肉眼根本看不見具體的一個個的點啦而已。
舉個例子：
iPhone手機的主屏：4.7英寸1334x750，就是指：對角線4.7英寸長，高1334個物理畫素數，寬750個物理畫素數。
CSS畫素（css pixel）
是Web程式設計的概念，指的是CSS樣式程式碼中使用的邏輯畫素（或者叫虛擬畫素）。
而我們知道，軟體的開發離不開硬體的支援，就比如你要在瀏覽器看到顯示效果，就得瀏覽器支援你呀！
在CSS規範中，長度單位可以分為絕對單位和相對單位，比如：px 是一個 相對單位 ，相對的是 物理畫素（physical pixel），這也就是說到底我們平常開發中的 1px 在每個螢幕上怎麼顯示，完全取決於這個裝置！
所以，問題就來了，到底CSS畫素如何在硬體裝置的物理畫素上顯示呢？往下看。
先糾正一個概念（dips）
- 有些人把
CSS畫素又叫做裝置無關畫素（dips）（比如：這裡），又說這個概念跟真正的dip/dp不是一回事！真實氣憤！就是這個概念的含糊不清，搞的我也頭暈目眩的。 - 這裡糾正一下，以後大家說到
裝置無關畫素就是指dip/dp，是我下文專門有一節講述的概念，它就是以160ppi為基準的一個相對單位，用來解決Android上面螢幕不統一問題的。 - 其餘的說法，就是
物理畫素和CSS畫素，分別代表硬體和軟體的單位，別再搞錯了。
捅破這層窗戶紙
在以前的顯示裝置上，一個物理畫素就顯示一個CSS畫素，這沒什麼好爭議的，大家也理所當然的認為該這麼處理，於是大家都在噪點中度過。
然而在2010年，搭載 Retina(高清屏) 的 iPhone4 出現了！也就是從這時候起，手機螢幕的競賽才真正開始啦，大家都爭先空後的朝著更大尺寸、更高解析度的方向前進。
那麼 Retina 到底有什麼突破呢？原來，它增加了一倍的手機螢幕的物理畫素，用2個物理畫素點，顯示一個CSS畫素。OMG，多麼有創意的想法！於是還是原來的樣子，還是那時的模樣，但是由於螢幕點數增多了，所以看著就更加清晰啦。
沒有對比就沒有傷害：
看出來為什麼上面的明顯比底下的清晰，噪點少嗎？因為它的網格更密集，其實也就是物理畫素更多，但是CSS畫素沒變（比如：蘋果的LOGO大小沒變，文字大小沒變）。
好了，弄明白了這點，我們再往下看一些其它的概念。
裝置畫素比（device pixel ratio）
簡寫：dpr
公式：物理畫素數（硬體） / 邏輯畫素數（軟體），它是裝置的屬性，而不是一個單位。
其實，比值就是前面說的 物理畫素數 除以 CSS畫素數。
在javascript中，可以通過 window.devicePixelRatio 獲取到當前裝置的 dpr。
在css中，可以通過 -webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio 進行媒體查詢，對不同dpr的裝置，做一些樣式適配。
舉個例子：
當 dpr=2 時，表示：1個CSS畫素 = 4個物理畫素。因為畫素點都是正方形，所以當1個CSS畫素需要的物理畫素增多2倍時，其實就是長和寬都增加了2倍。
沒有對比就沒有傷害：
畫素密度（pixers per inch）
簡寫：ppi，當然也叫做：dpi。
ppipixers per inch，出現於計算機顯示領域（當然也是Android中的習慣叫法）dpidots per inch，出現於列印或印刷領域（當然也是iOS中的習慣叫法）
其實，從概念中大家也能知道，它表示了一種從邏輯單位到實際單位的換算。這句話怎麼理解呢？
因為大家在實際生活中，已經大體知道1米是多長，1斤是多重，而這種單位就是實際單位。
- 那麼我告訴你：我手機螢幕是4.7英寸的，你大概有點感覺是吧？（1英寸=2.54釐米）！
- 但是如果為告訴你：我手機螢幕是320畫素的，你是不是就懵逼了？
所以，有了畫素密度這個說法，你用英寸來說明螢幕尺寸是一樣的，不信，看看你能理解不？
- 我的iphone5螢幕上每2.54釐米上有320個小燈泡~（ppi=320）
- 我的iphone6螢幕上每2.54釐米上就有375個小燈泡呢！（ppi=375）
你是不是明顯覺得iphone6更亮！
記住：ppi 說的都是物理畫素。
那麼，ppi 如何計算呢？因為行業內大家說的手機螢幕都是對角線，比如：4.7英寸，指的是手機螢幕對角線的長度（僅僅是顯示的螢幕哦，不包括邊框），大家都並沒有說手機的寬是多少英寸，高是多少英寸。所以，你計算 ppi 只能用對角線的物理畫素數來除以對角線的實際單位啦。
那麼計算ppi，首先得計算出對角線的物理畫素數，使用勾股定理，即：ppi = 根號下(1920平方+1080平方)/5.2 約等於 294。
那麼是不是ppi越大，越清晰呢？理論上是！但是，這得有個取捨。
沒有對比就沒有傷害：
- 2英寸1920x1080的主屏，ppi=765（瞎寫的）
- 4英寸1920x1080的主屏，ppi=382（YY的）
- 4.7英寸1920x1080的主屏，ppi=326（vivo x7）
- 5.2英寸1920x1080的主屏，ppi=294（HTC One）
來吧，感受下2英寸上，給你放1920x1080個物理畫素，是不是一團漆黑了？有人喜歡大屏，也有人喜歡小屏，所以嘛這個值只是個參考，你可以對比相同尺寸下的ppi，但是千萬不要對比不同尺寸下的，這樣你會受傷的！
裝置獨立畫素（density-independent pixel）
也叫做：密度無關畫素。
指Google提出的用來適配Android海量奇怪螢幕的，之前iOS沒有裝置獨立畫素一說，因為之前它的CSS畫素都是320px，但是隨著iPhone6(375px)、iPhone6 Plus(414px)等不同手機型號出現，導致了手機上能看到的CSS畫素點也增加的情況下，也得考慮了。
簡寫：dips or dp
為什麼Google提出這個概念能解決不同裝置（或不同密度）下的顯示問題呢？
原因是：不同的手機螢幕上 CSS畫素 個數可能不一樣，雖然大多數是320px!
舉個例子：
- iPhone3GS，物理畫素320，dpr=1，所以決定了它的CSS畫素320；
- iPhone4，物理畫素640，dpr=2，所以，決定了它的CSS畫素還是320；
假如這時候我們有個正方形是 30x30px，這是CSS畫素，再上面的2個機器上看到的大小都一樣，只是在iphone4上更清晰些，因為它用4個物理畫素顯示1個CSS畫素。換句話說，如果大家都是手機都是320的CSS畫素，那麼我們就只管用 px 這個單位就可以了，在每個裝置上的看到的大小都一樣。
如果在iphone5s之前，iOS都不需要關心這個概念，因為你能看到的手機螢幕的CSS畫素都是320px。但是，隨著iPhone6/plus的出現，就讓我們心塞了。
舉個例子：
- 你有個
160px x 160px的元素，在iphone5s下面看起來寬度正好是半個螢幕大小； - 在iphone6plus下面，看起來寬度貌似只佔了螢幕寬度的
不到一半螢幕大小！Why？因為人家畫素數量多啊！
明白了嗎？就是由於不同的裝置螢幕，它所支援的螢幕顯示的 CSS畫素 個數不同（跟物理畫素無關），所以，我們如果用 畫素（px） 這個單位去WEB開發的話，在不同的手機下面就顯得元素不一樣大，這就是 dip 的作用，它的出現也就是為了解決這個問題的。
那麼，dip 如何解決這個問題呢？
Google規定：ppi = 160時，1px = 1dip（dip在Android下面是一個單位哦！） 那麼，我們就能知道，畫素數px = dip * ppi / 160
那麼，回到剛才的那個栗子：
- 將
80px x 80px的元素，單位換為80dip x 80dip，在iphone5s下寬度是163px x 163px（由前2行公式得，163px = 80 * 326 / 160）； - 而這個元素在iphone6plus下，寬度是
207px x 207px（163px = 80 * 414 / 160）；
如果我們使用 dip 作單位，那麼在2臺機器上，顯示出來的效果，差不多都等於2臺機器寬度的一半！目的就達到了。
另外，dip 作為 單位 僅僅適用於Android，但是思想可以用到 iOS 和 Windows 等平臺。比如：Windows中修改螢幕解析度，其實修改的是 dpr ，又由於物理畫素不變，其實就等於修改了螢幕中 CSS畫素 的個數，這也就是為什麼修改了解析度後，有些東西看著明顯變大或者變小的原因了。
其它
設計稿
就是做UI的MM或者GG給你的PS或者切圖圖片或者標註圖片，拿著這個你就可以開始照著勾勒頁面啦。當然，小公司可能沒有這一步，也許就是產品拿著Axure畫的原型直接輸出給你，讓你照著做頁面，那麼這個也就算是設計稿啦！相當於要求沒辣麼高啦。
負責輸出設計稿的崗位，叫：UI（User Interface 使用者介面）。
有些公司把設計稿也叫做：視覺稿 或者 高保真 圖。
互動稿
在大一些的公司，崗位分的可能更細，在開始做頁面之前，除了會輸出上面提到的 視覺稿 ，還會同時給你輸出一份具有動態效果示意的檔案，一般可能是 GIF 檔案。主要是告訴你，頁面上某個元素的出現、消失等動畫效果。尤其是做一些活動頁面，動畫要求多的，可能互動稿就很有必要，不然很多時候，你做出來的效果，未必是產品需要的，那就尷尬了。
負責輸出互動稿的崗位，叫：UE（User Experience 使用者體驗），有的也叫 UX。
UE用的比較多的工具是：Adobe After Effects CC 2015。