第一部分：基本概念
物理像素：這個(gè)就是在屏幕上可以控制的最小顯示單位，比如顯示顏色的最小單位。
css像素: 就是我們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)時(shí)在css中使用的像素，比如：border: 1px black solid;這里的1px即為css像素，實(shí)際上這種像素就是下面我們要介紹的設(shè)備獨(dú)立像素。
設(shè)備獨(dú)立像素（density-independent pixel）:設(shè)備獨(dú)立像素又成為密度無(wú)關(guān)像素，它獨(dú)立于設(shè)備，比如說(shuō)是css像素，他們可以轉(zhuǎn)化為物理像素。設(shè)備獨(dú)立像素也稱(chēng)與設(shè)備無(wú)關(guān)的像素（device-independent pixel,簡(jiǎn)稱(chēng)DIPs)，更簡(jiǎn)單的理解即為：獨(dú)立于設(shè)備的用于邏輯上衡量像素的單位。
設(shè)備像素比：即物理像素/設(shè)備獨(dú)立像素=設(shè)備像素比（device pixel ratio）,設(shè)備像素比的英文即dpr,我們?cè)贘avaScript中可以通過(guò)window.devicePixelRatio獲取到當(dāng)前設(shè)備的dpr。那么設(shè)備像素比是怎么一回事呢？此問(wèn)題的關(guān)鍵要?dú)w結(jié)為：css中的1px并不等于設(shè)備中的1px。也就是說(shuō)：物理像素和設(shè)備獨(dú)立像素是不一樣的。在早先的移動(dòng)設(shè)備中，比如iPhone3，它的分辨率是320X480（此分辨率很低），一個(gè)css像素（設(shè)備獨(dú)立像素）確實(shí)等于一個(gè)屏幕物理像素，此時(shí)dpr為1，但是隨著科技的發(fā)展，移動(dòng)設(shè)備的像素密度（下面會(huì)介紹）越來(lái)越高，從iPhone4開(kāi)始，蘋(píng)果公司便推出了Retina屏，在屏幕尺寸沒(méi)有變化的情況下分辨率卻大大提高了，成了640X960，這意味著：同樣大小的屏幕上，物理像素多了一倍，而css像素沒(méi)有變，于是一個(gè)css像素是等于兩個(gè)物理像素的，此時(shí)dpr為2。現(xiàn)在標(biāo)準(zhǔn)的PPI已經(jīng)很少見(jiàn)了，大多是Retina視網(wǎng)膜設(shè)備，比如，iPhone5s的設(shè)備像素比為2，iPhone6s的設(shè)備像素比為3。（注：Retina視網(wǎng)膜屏幕即PPI值超過(guò)300的超高密度屏幕，只是蘋(píng)果公司給它起了一個(gè)高大上的名字而已）。大家可以在 http://DevicePixelRatio.com這個(gè)網(wǎng)站中可以看到更多設(shè)備的dpr。下圖即說(shuō)明了物理像素和css像素之間的關(guān)系：
像素密度(PPI)：即pixel per inch,由英文可知，PPI即為每英寸所具有的
