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

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

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

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

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