引用自@莫声谷
以iphone 6 为例，物理分辨率为 1334*750，4.7英寸，根据这些数据可以得出：
ppi =
= 326
也就是说 dpr = 2， 1px = 2dp
那么，假设我们要在 300px *300px 的容器里，显示一张 300px*300px 的图片，此时1个位图信息对应4个dp，位图信息不可分割，所以不足的地方会用相似的颜色表示，这也就是普通图片在 Retian 屏幕下模糊的原因。
经过上面的分析，很显然，我们需要让 4个位图信息对应4个dp，也就是我们需要一个二倍图，600*600的图
解决一：设置media query 跟具dpr的不同，设置不同尺寸的 图片
可以用less或者sass写一个 mixin，这里我用的sass
//_mixin.scss
@mixin bg-img($name,$w,$h,$dpr,$suffix:png){
@media screen and (-webkit-device-pixel-ratio: $dpr){
background:url(http://img.163.com/#{$name}_#{$w*$dpr}_#{$h*$dpr}.#{$suffix});
}
}
//main.scss
.box{
@include bg-img("bg",300, 300, 2);
}
//=>输出
@media screen and (-webkit-device-pixel-ratio: 2) {
.box { background: url(http://img.163.com/bg_600_600.png); }
}
解决二： 设置viewport 的 initial-scal=0.5
这样相当于，1px = 1dp，此时图片就不需要二倍图了,按照设计图该给多大给多大，但是相对应的，div和字体的大小都会缩放，解决方案可以使用 rem布局,网上相关的内容很多，这里不再赘述。
吐槽###
简书竟然不支持MathJax：
$$ppi=\frac{\sqrt{1334\times1334+750\times750}}{4.7}=326$$
