高清屏的背景图片适配

当我们把一个图标做成CSS中的背景图，在视网膜屏上预览时会发现图标是模糊的，所以我们会同时准备一个2倍大小的图标给高清屏，那么问题来了，怎么实现在普通屏下是普通背景图，而在高清屏下是用的高清图呢？

主要有四种实现方式：

1. media query + pixel-ratio 实现

2. img标签引用的不同大小图片，通过retina.js根据设备自动替换图片地址

3. image-set 实现（不兼容微信浏览器）

4. svg 实现

线上效果查看：

PC端: http://danielding.github.io/samples/retina_adapt_image_solution.html

手机端二维码：

================================================================================================================

高清屏的背景图片适配就是要做到响应式背景图片, 自适应各种视网膜(Retina)屏幕的背景图片, 可以通过Media Queries和image-set实现:

Media Queries:

.hd{
   background-image:url(105-160.png);/* 普通屏幕 */
}
/* ------------- Retina ------------- */
@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
       only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 之前 */
       only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */
       only screen and (min-resolution: 240dpi), /* 标准 */
       only screen and (min-resolution: 2dppx) /* 标准 */
{
    .hd{
    background-image:url(210-320.png);
    background-size: 105px 155px;
    }
}

使用“Media Queries”的问题是，CSS 代码的可维护性不高，有一些 hack 的味道。在高分辨率显示器下他没有选择的权利。同时还有另一种解决方案;

CSS[image-set]:

.hd{
    background-image: url(no-image-set.png);
    /* Retina */
    background-image: -webkit-image-set(url(low-res.png) 1x, url(high-res.png) 2x);
    background-image: -moz-image-set(url(low-res.png) 1x, url(high-res.png) 2x);
    background-image: -o-image-set(url(low-res.png) 1x, url(high-res.png) 2x);
    background-image: -ms-image-set(url(low-res.png) 1x, url(high-res.png) 2x);
}

image-set的好处是，在支持image-set的浏览器会在高分辨下匹配需要的图像，而没有其他额外的功能。为浏览器提供不同的图像选择，这浏览器在不同的分辨下选择正确的图像。不需要告诉浏览器使用什么图像，而是直接提供了图像让浏览器选择。

image-set能让各种不同分辨下的图像都显示在CSS中的同一个地方。而使用media queries显示不同图像时，你可能会隔开很多行代码，难于寻找到对应的图像。