Retina 屏幕與二倍圖

分辨率

• 屏幕分辨率：指屏幕可顯示的像素的個數
• 圖像分辨率：位圖圖像包含的像素的個數

對於 Retina 屏它的分辨率是傳統屏的兩倍，而屏幕大小沒有變化，因此它須要的圖片的分辨率應該是傳統屏幕的兩倍（甚至多倍），顯示時按傳統屏的大小顯示，否則就會由於圖像分辨率不夠形成顯示模糊。

像素

• CSS 像素：px(css pixel)
• 設備無關像素：DIPs(Device-independent pixel)

一個 CSS 像素對應一個設備無關像素。但對於 Retina 屏它的一個設備無關像素會包含兩倍（甚至多倍）的物理像素，也就是一個 CSS 像素將對應更多的 「點」。

參考

前端二倍圖的思考（涉及 Retina） - 王逍遙 - 博客園

分辨率_百度百科

DIP（設備獨立像素）_百度百科