网页高清屏和retina（视网膜）屏的双倍图解决办法

<div class="img">
  [站外图片上传中……(3)]
  [站外图片上传中……(4)]
  <div class="logo"></div>
</div>

CSS Media Queries
css属性：device-pixel-ratio和-webkit-image-set
先看看两者的兼容性：

第二个截图，不是确切。加上私有属性“--webkit-”，Safari 6+和chrome 21+都支持的。这个属性仅是CSS4的一个草案。（注：第二种方法没法用于img标签。）
看见上面两种方法的兼容性都不咋地好，你可能会立马否决使用它。其实不然，上面提到我是看了好几个网站的源码才偶然发现第二种方法的，那么久给你看看结果：苹果网站（第一种），华为（第一种，不过由于它使用的jquery fancybox插件，是这个插件带得，可以估计不算在内。），魅族（第二种），小米（第二种），锤子（第二种），腾讯首页（第二种）。
再者你仔细想想，retina屏的用户群，都是些苹果的手机(iphone)和ipad以及笔记本（rmbp）等等设备，也就恰好在该属性兼容范围内。
示例代码：

.test {
  background-image: url('img/logo.jpg'); 
  background-image: -webkit-image-set(url('img/logo.jpg') 1x,url('img/logo@2x.jpg') 2x);
  background-size: 425px 195px;
  width: 425px;
  height: 195px;
}
@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),
(min-resolution: 192dpi) {
  .logo {
    background-image: url('img/logo@2x.jpg');
    background-size: 425px 195px;
    width: 425px;
    height: 195px;
   }
 }

网页高清屏和retina（视网膜）屏的双倍图解决办法

参考