苹果公司最近发布了一款Retina 5K显示屏，5120 x 2880的分辨率，1470万像素的imac电脑。超级棒的最美的一款产品。
然而我们在设计webAPP的时候，尺寸都是以iphone5s的尺寸（640*1136）为基础来设计的。目前市面上的主流手机基本都是Retina屏幕的。
如果按照以前我们做网页设计时候的切图方式或者是设计方式来弄webAPP设计，肯定不行。因为我们设计东西在Retina屏幕下显示肯定会是真。
所以，今天跟随上海手机应用软件开发了解下Retina屏幕的基础知识。
Retina，中文直译为视网膜。众所周知，最先采用Retina屏幕的苹果设备是iPhone 4，其屏幕每英尺像素达到326ppi。即每英寸可显示326像素。而300 ppi是人类所能看到的分辨率的极限数值。
@2x是Retina图标的标准命名方式。为什么我们在设计APP的时候要切图命名的格式是这样。现在应该明白了吧。 也理解为是原图的2倍的意思。
Retina屏幕发布的时间是2012年，从此Retina屏幕设计走入我们的眼前。
看完上面的这张图片在Retina屏幕上的显示效果。
第一种解决方案：直接加载2倍大小的图片。
假如要显示的图片大小为200px*300px，你准备的实际图片大小应该为400px*600px，并且使用以下代码控制即可：
<img src=”pic.png” height=”100px” width=”200px” />
这种方法就解决了Retina显示不清楚的问题，但是在普通屏幕下，这种图片要经过浏览器的压缩，在IE6和IE7上有十分差得显示效果，同时，两倍大小的图片势必会导致页面加载时间加长，用户体验下降，此时，我们可以通过Retina.js（http://retinajs.com/）文件解决：
<img src=”pic.png” height=”100px” width=”200px”/>
$(document).ready(function () {
if (window.devicePixelRatio > 1) {
var images = $("img.pic");
images.each(function(i) {
var x1 = $(this).attr('src');
var x2 = x1.replace(/(.*)(.w+)/, "$1@2x$2");
$(this).attr('src', x2);
});
}
});
第二种解决方案：background背景图标来设定。
比如css3的一个背景属性：background-size。记住应该切2倍以上的图片，然后缩小，这样才能保证网页上的图标显示在 Retina上显示清楚。
这是在上海手机应用软件开发webAPP上面针对图片的处理技巧。
而以iphone6作为设计稿的时候，我们的切图命名方式如下：
iPhone6：命名：Default-375w-667h@2x.png 分辨率：750*1334
iPhone6plus 命名：Default-414w-736h@3x.png 分辨率：1242*2208
