做項(xiàng)目的過程中有這樣的問題：
設(shè)計師給的圖標(biāo)，使用的時候都是取寬和高的一半來用的，比如：設(shè)計給一張尺寸為56x56的圖標(biāo)，使用的時候尺寸卻用32x32。

為什么要取一半使用呢？
公司的設(shè)計稿基本給的是二倍圖，是為了兼容高清屏幕的圖片高清晰顯示。

物理像素和邏輯像素的關(guān)系
物理像素指設(shè)備像素，css中通常用到的單位指的是邏輯像素。在Retina屏幕出現(xiàn)之前，1邏輯像素由1物理像素來顯示，Retina屏幕出現(xiàn)之后，1邏輯像素由多個物理像素來顯示。對比圖如下：

普通屏幕與Retina屏幕像素顯示對比圖

2px x 2px的大小，在普通屏幕中，需要4個像素點(diǎn)來顯示，而在Retina屏幕中，則需要16個像素點(diǎn)來顯示。

那么，如果在普通屏幕中正常顯示的圖片，在高清屏幕中會不會有問題？

普通屏幕的1個CSS像素點(diǎn)對應(yīng)4個高清屏幕的像素點(diǎn)，1個分成4個，不夠分的情況下，顏色會取近似值。所以在高清屏上，在普通屏幕正常顯示的圖片會變的模糊。

舉例說明，一張100x100的圖片，通過CSS設(shè)置它{ width:100px; height:100px }。在普通密度桌面顯示屏的電腦上打開，沒有什么問題，但假設(shè)在手機(jī)/或者Retina屏幕的Mac，按照邏輯分辨率來渲染，他們的devicePixelRatio=2，那么就相當(dāng)于拿4個物理像素來描繪1個電子像素。這等于拿一個2倍的放大鏡去看圖片，圖片可能因此變得模糊。

devicePixelRatio用來查看設(shè)備像素比。

所以我們就會使用2倍圖，來保證普通屏和高清屏顯示一致。

參考資料
高清屏概念解析與檢測設(shè)備像素比的方法
前端工程師需要明白的「像素」
前端不止：Retina屏幕下兩倍圖