第一部分：基本概念

物理像素：這個就是在屏幕上可以控制的最小顯示單位，比如顯示顏色的最小單位。

css像素: 就是我們在設(shè)計網(wǎng)頁時在css中使用的像素，比如：border: 1px black solid;這里的1px即為css像素，實際上這種像素就是下面我們要介紹的設(shè)備獨立像素。

設(shè)備獨立像素（density-independent pixel）:設(shè)備獨立像素又成為密度無關(guān)像素，它獨立于設(shè)備，比如說是css像素，他們可以轉(zhuǎn)化為物理像素。設(shè)備獨立像素也稱與設(shè)備無關(guān)的像素（device-independent pixel,簡稱DIPs)，更簡單的理解即為：獨立于設(shè)備的用于邏輯上衡量像素的單位。

設(shè)備像素比：即物理像素/設(shè)備獨立像素=設(shè)備像素比（device pixel ratio）,設(shè)備像素比的英文即dpr,我們在JavaScript中可以通過window.devicePixelRatio獲取到當前設(shè)備的dpr。那么設(shè)備像素比是怎么一回事呢？此問題的關(guān)鍵要歸結(jié)為：css中的1px并不等于設(shè)備中的1px。也就是說：物理像素和設(shè)備獨立像素是不一樣的。在早先的移動設(shè)備中，比如iPhone3，它的分辨率是320X480（此分辨率很低），一個css像素（設(shè)備獨立像素）確實等于一個屏幕物理像素，此時dpr為1，但是隨著科技的發(fā)展，移動設(shè)備的像素密度（下面會介紹）越來越高，從iPhone4開始，蘋果公司便推出了Retina屏，在屏幕尺寸沒有變化的情況下分辨率卻大大提高了，成了640X960，這意味著：同樣大小的屏幕上，物理像素多了一倍，而css像素沒有變，于是一個css像素是等于兩個物理像素的，此時dpr為2?，F(xiàn)在標準的PPI已經(jīng)很少見了，大多是Retina視網(wǎng)膜設(shè)備，比如，iPhone5s的設(shè)備像素比為2，iPhone6s的設(shè)備像素比為3。（注：Retina視網(wǎng)膜屏幕即PPI值超過300的超高密度屏幕，只是蘋果公司給它起了一個高大上的名字而已）。大家可以在 http://DevicePixelRatio.com這個網(wǎng)站中可以看到更多設(shè)備的dpr。下圖即說明了物理像素和css像素之間的關(guān)系：

                               


像素密度(PPI)：即pixel per inch,由英文可知，PPI即為每英寸所具有的