收藏一下高清屏和普通屏下背景图设置方案

引用自@莫声谷

以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$$