Retina 屏幕与二倍图

分辨率

• 屏幕分辨率：指屏幕可显示的像素的个数
• 图像分辨率：位图图像包含的像素的个数

对于 Retina 屏它的分辨率是传统屏的两倍，而屏幕大小没有变化，因此它须要的图片的分辨率应该是传统屏幕的两倍（甚至多倍），显示时按传统屏的大小显示，否则就会由于图像分辨率不够形成显示模糊。

像素

• CSS 像素：px(css pixel)
• 设备无关像素：DIPs(Device-independent pixel)

一个 CSS 像素对应一个设备无关像素。但对于 Retina 屏它的一个设备无关像素会包含两倍（甚至多倍）的物理像素，也就是一个 CSS 像素将对应更多的 “点”。

参考

前端二倍图的思考（涉及 Retina） - 王逍遥 - 博客园

分辨率_百度百科

DIP（设备独立像素）_百度百科