今天被問到關(guān)于像素的問題，怒補了一下。
retina的原意是視網(wǎng)膜，retina屏就是通過技術(shù)把更多的像素點壓縮到屏幕里，使肉眼無法識別屏幕上的單個像素。
那么問題來了，如何分辨retina屏呢？
首先了解幾個名詞：
設(shè)備像素比：window.devicePixelRatio（簡稱：dpr）
設(shè)備像素比（dpr） = 物理像素／設(shè)備獨立像素
物理像素
物理像素就是屏幕上的最小的物理部件，就是像素點，比如iphone6的物理像素就是750x1334
設(shè)備獨立像素
也叫密度無關(guān)像素。可以認為是計算機坐標系統(tǒng)中得一個點，這個點代表一個可以由程序使用的虛擬像素(比如: css像素)，然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。比如iphone6的設(shè)備獨立像素就是375x667px
每英寸像素(pixel per inch)：
表示每英寸屏幕上所擁有的像素個數(shù)。ppi越大，屏幕像素密度越大。
以iphone6為例：
iphone6的dpr = 1334/667 = 2
dpr為2是什么意思呢，看下圖
retina-web-3.jpg
在普通屏幕上，1px的設(shè)備獨立像素對應(yīng)1物理像素。在retina屏幕下，1px的設(shè)備獨立像素對應(yīng)4物理像素。
位圖像素
一個位圖像素是柵格圖像(如：png, jpg, gif等)最小的數(shù)據(jù)單元。
TB12ALnIpXXXXb1XVXXXXXXXXXX.jpg
在普通屏幕下，1個位圖像素對應(yīng)著1個物理像素，圖片可以完美的顯示。可是在retina屏幕下，1個位圖像素對應(yīng)著4個物理像素，由于位圖像素不可以再分割，所以圖片就會只能就進取色，導(dǎo)致圖片模糊。
如何來處理這個問題呢。比如一個200 x 300的圖片，如果想在retina屏幕上清晰顯示的話，就要提供一個400 x 600的 2倍圖片（@2x），這樣的話，1個位圖像素就會對應(yīng)上retina屏上的1個物理像素。圖片就不會模糊啦。
