Retina Display用のMedia Query

Retina 対応の画像を用意する場合

@media only screen and (min-device-width : 320px)
  and (max-device-width : 480px) {

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 

  /* Retina-specific stuff here */

}

}

device pixel ratio　とは
デバイスピクセル比とかいわれている
デバイスピクセル（dpx）とCSSピクセル（csspx）の対応

スマートフォンの画面解像度とピクセル密度についてはこちらのサイトがとても分かりやすかったです。
http://myakura.github.io/n/density.html

CSS TRICKS
Retina Display Media Query
http://css-tricks.com/snippets/css/retina-display-media-query/

mixin

@mixin imgRetina($image, $extension, $width, $height) {
     background: url($image + '.' + $extension) no-repeat;
     width: $width;
     height: $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) {     
                background-image: url($image + '-2x' + '.' + $extension) no-repeat;
                background-size: $width $height;
     }
}

device pixel ratio が1.3にするとAndroidの高解像度デバイスにも対応するってことでしょうか
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集
http://www.webcreatorbox.com/tech/sass-mixin/