“像素”對於前端人員和設計師應該再熟悉不過了，但在他們的溝通過程中還是會出現很多關於像素的溝通障礙，其中的原因並不是因爲各自觀點不一致，而是因爲，像素本就分爲兩種。
AnyForWeb首先爲大家分別介紹一下這兩種像素的區別。
像素分爲設備像素（device pixel）和CSS像素（CSS pixel）。設備像素是我們在設備中使用的像素，是一種物理概念；而CSS像素是CSS樣式代碼中的邏輯元素，可以劃分到web編程的概念中。
簡單來說，設備像素就是設計師口中的像素，CSS像素是前端人員所認爲的像素。前提條件的不一致才導致了雙方溝通不順暢。
接下來，AnyForWeb告訴你這兩者之間如何進行換算。
設備像素和CSS像素之間的關係由每英寸像素（pixel per inch，簡稱ppi）聯繫着。ppi是指每英寸所含的像素數量，所以數量越多，顯示的圖像就越清晰。ppi值需要前端人員自己計算得出，公式表達爲PPI=√(X²+Y²)/ Z ，X=長度像素、Y=寬度像素、Z=屏幕尺寸。
ppi的計算是爲了得到密度分界，不同的密度所在區間對應着不同的縮放比例（如下圖），我們要根據ppi數值來獲得最合適的圖像縮放比例，也就是設備像素的最佳縮放比例。
ppi主要劃分爲4個密度區間。120-160被歸爲低密度手機，160-240爲中密度，240-320是高密度，320以上就是超高密度（也就是蘋果提出的Retina）。
當我們同時獲取了設備像素比和每英寸像素比（ppi）後，便可得出他們之間的比例。當這個比率爲1:1時，使用1個設備像素顯示1個CSS像素。當這個比率爲2:1時，使用4個設備像素顯示1個CSS像素，當這個比率爲3:1時，使用9（3*3）個設備像素顯示1個CSS像素，以此類推。
有了這些像素基本知識作爲基礎，設計師與前端人員之間的協作會變得更順暢。通常情況下，設計師提交的設計稿會使用設備像素，後期由前端人員計算設備像素比，並進行後期的換算和編碼。
本文最初由AnyForWeb技術發佈，如需查看詳情，請點擊《AnyForWeb分享：像素！你真的瞭解嗎？》