網膜画面と非網膜画面に同じ画像を使用する場合は、ここが解決策です。イメージが200x200
あり、上の行に2つのアイコンがあり、下の行に2つのアイコンがあるとします。つまり、4つの象限です。
.sprite-of-icons {
background: url("../images/icons-in-four-quad-of-200by200.png") no-repeat;
background-size: 100px 100px /* Scale it down to 50% rather using 200x200 */
}
.sp-logo-1 { background-position: 0 0; }
/* Reduce positioning of the icons down to 50% rather using -50px */
.sp-logo-2 { background-position: -25px 0 }
.sp-logo-3 { background-position: 0 -25px }
.sp-logo-3 { background-position: -25px -25px }
スプライトアイコンのスケーリングと配置を実際の値の50%にすると、期待どおりの結果が得られます。
Ryan Benhaseによるもう1つの便利なSCSSミックスインソリューション。
/****************************
HIGH PPI DISPLAY BACKGROUNDS
*****************************/
@mixin background-2x($path, $ext: "png", $w: auto, $h: auto, $pos: left top, $repeat: no-repeat) {
$at1x_path: "#{$path}.#{$ext}";
$at2x_path: "#{$path}@2x.#{$ext}";
background-image: url("#{$at1x_path}");
background-size: $w $h;
background-position: $pos;
background-repeat: $repeat;
@media all and (-webkit-min-device-pixel-ratio : 1.5),
all and (-o-min-device-pixel-ratio: 3/2),
all and (min--moz-device-pixel-ratio: 1.5),
all and (min-device-pixel-ratio: 1.5) {
background-image: url("#{$at2x_path}");
}
}
div.background {
@include background-2x( 'path/to/image', 'jpg', 100px, 100px, center center, repeat-x );
}
上記のミックスインの詳細については、こちらをお読みください。