HTML5 pictures in the retina screen commonly used several processing methods

1. Media Queries
   Use CSS3 Media query to achieve high-definition screen image processing.

   {    . logo {        background-image: url (' img/[email protected] ');         Background-size: 400px 200px; width: 400px; height: 200px;    } }

   Sass's Mixin

   //-----------------------------------Retina pictures-----------------------------------------   {      @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) {          /*  *          /Background-image:url ($image);           Background-size: $width $height;      }   }  

3. Retina.js Download free CND GitHub
   
5. The Image-set property of CSS4

   {    background-image: url (' img/logo.jpg ');     background-image: -webkit-image-set (url (' img/logo.jpg ') 1x,url (' Img/[email protected] ') 2x) ;     background-size: 425px 195px;     width: 425px;     height: 195px;}

6. HTML5 Picture Element

   < Picture>   <SourceMedia= "(min-width:1024px)"Srcset= "Foo-large.jpg 1024w, Foo-medium.jpg 640w, foo-small.jpg 320w"Sizes= "50VW" />   <SourceSrcset= "[email protected] 2x, foo.jpg 1x" />   <imgsrc= "Foo.jpg"alt= "Bar" /></ Picture>

8. Server-side processing Retina Images GitHub
   How to use

HTML5 pictures in the retina screen commonly used several processing methods