AnyForWeb分享：畫素！你真的瞭解嗎？

“畫素”對於前端人員和設計師應該再熟悉不過了，但在他們的溝通過程中還是會出現很多關於畫素的溝通障礙，其中的原因並不是因為各自觀點不一致，而是因為，畫素本就分為兩種。

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 UDC前端將定期釋出Web前端部落格，涉及Web前端技術，前端趨勢等相關，敬請期待！