SCSS Hight DPI mixin

@mixin hidpi($ratio: 1.3) { @media only screen and (-webkit-min-device-pixel-ratio: $ratio), only screen and (min--moz-device-pixel-ratio: $ratio), only screen and (-o-min-device-pixel-ratio: #{$ratio}/1), only screen and (min-resolution: round($ratio * 96dpi)), only screen and (min-resolution: $ratio * 1dppx) { @content; } } /* Usage: .foo { background: url(image.png); @include hidpi { background: url(image@2x.png); } } */
Useful SCSS snippet for High-Definition screens like Retina

1 Response

Might be better
@mixin background-image-retina($file, $type, $width, $height) {
background-image: url($file + '.' + $type);
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx){
& {
background-image: url($file + '@2x.' + $type);
-webkit-background-size: $width $height;
-moz-background-size: $width $height;
background-size: $width $height;
}
}
}

/*
.logo {
@include background-image-retina(logo, png, 200px, 100px);
}
*/

Write a comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.