二倍图/三倍图的分辨率问题

方法一：

利用css样式以及放两倍图。
有一张200x200像素的图片（CSS像素，也就是普通像素点或者说是标准像素点），我们给图片设置一个CSS样式：

img{
     width:200px;
     height:200px;
}

图片模糊的情况：固定好css像素。将width和height固定好。此时在这个width和height 对于不同的显示器包含的像素已经确定了。然后在两种不同屏幕上放图片：那么Ritina屏幕图片会模糊。因为没有css像素的width height所对应Retina显示器的像素数那么多。你硬生生的把这张图片拉成那么大。必然模糊。
在iPad2或Mini iPad中就是很正常显示的图片；但是，在New iPad中，1个CSS像素点实际上有4个位图像素点，1个分成4个，显然不够分啊，只能颜色近似选取，于是，图片感觉就是模糊的。

因此，要想让视网膜屏幕下的图片高清晰显示，我们需要的图片的原始大小不能是200×200像素，而需要2倍高宽，即400×400像素，CSS像素限制依然是:

img {
width:200px;
height:200px;
}

此时，视网膜屏幕下图片就显示OK了（非视网膜屏幕图片被压缩-减少像素取样——资源浪费！）。

方法二：

查询像素密度：准备两种大小但是一样的图片。利用css的媒体查询或者JS的 Retina.js来调取图片。（浏览器支持是一个问题）1 css：可以通过“device-pixel-ratio”属性或者其扩展属性“min-device-pixel-ratio”和“max-device-pixel-ratio”。这几个Media Queries可以使用background-image为Retina准备高精密度像素的图片。

.icon {
background-image: url(example.png);
background-size: 200px 300px;
height: 300px;width: 200px;
}
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
      only screen and (-moz-min-device-pixel-ratio: 1.5),
      only screen and (-o-min-device-pixel-ratio: 3/2),
      only screen and (min-device-pixel-ratio: 1.5) {
          .icon {
                background-image: url(example@2x.png);
          }
}

方法三：
放缩放的矢量图形（浏览器支持是一个问题）

获得设备像素比后，便可得知设备像素与CSS像素之间的比例。也就是window.devicePixelRatio。
一倍图：当这个比率为1:1时，使用1个设备像素显示1个CSS像素。
二倍图：当这个比率为2:1时，使用4个设备像素显示1个CSS像素，
三倍图：当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。