HTML5之图片在Retina屏的常用几种处理方式

1. Media Queries
   使用css3的媒体查询实现高清屏的图片处理。

   @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) {
       .logo {
           background-image: url('img/logo@2x.jpg');
           background-size: 400px 200px; width: 400px; height: 200px;
       }
   }

   sass的mixin

   //-----------------------------------Retina图片-----------------------------------------  
   @mixin image-2x($image, $width, $height) {  
       @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {  
           /* on retina, use image that's scaled by 2 */  
           background-image: url($image);  
           background-size: $width $height;  
       }  
   }  

    

2. retina.js下载     免费CND      GitHub
   
3. CSS4的image-set属性

   .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;
   }

    

4. HTML5 picture Element

   <picture>
      <source media="(min-width: 1024px)" srcset="foo-large.jpg  1024w, foo-medium.jpg 640w, foo-small.jpg 320w" sizes="50vw" />
      <source srcset="foo@2x.jpg 2x, foo.jpg 1x" />
      <img src="foo.jpg" alt="Bar" />
   </picture>

    

5. 服务端处理 Retina Images  github  
   使用方法