今天被問到關(guān)于像素的問題，怒補了一下。

retina的原意是視網(wǎng)膜，retina屏就是通過技術(shù)把更多的像素點壓縮到屏幕里，使肉眼無法識別屏幕上的單個像素。

那么問題來了，如何分辨retina屏呢？

首先了解幾個名詞：

設(shè)備像素比：window.devicePixelRatio（簡稱：dpr）

設(shè)備像素比（dpr） = 物理像素／設(shè)備獨立像素

物理像素

  物理像素就是屏幕上的最小的物理部件，就是像素點，比如iphone6的物理像素就是750x1334

設(shè)備獨立像素

也叫密度無關(guān)像素?？梢哉J為是計算機坐標系統(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個物理像素，圖片可以完美的顯示?？墒窃趓etina屏幕下，1個位圖像素對應(yīng)著4個物理像素，由于位圖像素不可以再分割，所以圖片就會只能就進取色，導(dǎo)致圖片模糊。
如何來處理這個問題呢。比如一個200 x 300的圖片，如果想在retina屏幕上清晰顯示的話，就要提供一個400 x 600的 2倍圖片（@2x），這樣的話，1個位圖像素就會對應(yīng)上retina屏上的1個物理像素。圖片就不會模糊啦。