1.物理像素
(1)物理像素是顯示器(手機屏幕)上最小的物理顯示單元，在操作系統的調度下，每一個設備像素都有自己的顏色值和亮度值。
(2)設備獨立像 像索(也叫目睹無關像素)， 可以認爲是計算機座標系統中得一 個點，這個點代表一個可以由程序使用的虛擬像索(css像素)，然後由相關係統轉換爲物理像素
(3)物理像索比(device pixel ratio )設備像素比 (簡稱dpr )定義了 物理像素和設備獨立像素的對應關係,它的值可以按如下的公式的得到：設備像素比=物理像素 / 設備獨立像素，js中可以通過window devicePixelRatio
(4)在pc端上，1css像素=1物理像素，即dpr= 1:1 ;但是在iPhone上，1css像素=4物理像素，即dpr=2:1
2.位圖像素
(1) 1個位圖像素是柵格圖像(如: png，jpg，gif等)最小的數據單元。每個位圖像素都包含這一些資深的現實信息 (如:顯示位置，顏色值，透明度等)
在普通屏幕下是沒問題的，但是在retina屏幕下就會出現位圖像素點不夠，從而導致圖片模糊的情況
(2)對於dpr= 2的，1個位圖像索對應於4個物理像索,由於單個位圖像素不以再進步分割，所以只能就近取色，從而導致圖片模糊解決辦法使用分辨率大兩倍的圖片
如200*300 img標籤,就需要提供400*600的圖片.由此一來位圖像素點的個數是原來的4倍，在retina屏幕下，位圖像素點個數就可以物理像素點個數形成1:1的比例，圖片自然就清晰了。
(3)這裏就還有另一個問題，如果普通屏幕下，也用了兩倍圖片，會怎樣呢?
很明顯，在普通屏幕下，200x300(css pixel)img標籤，所對應的物理像素個數就是200x300個,而兩倍圖片的位圖像素個數則是200x300*4，所以就出現一個物理像素點對應4個位圖像素點，所以它的取色也只能通過一定的算法(顯示結果就是一張只有原圖像素總數四分之- -， 我們稱這個過程叫做downsampling)，肉眼看上去雖然圖片不會模糊，但是會覺得圖片缺少一些銳利度，或者是有點色差，但還是可以接受的