Skip to content

Instantly share code, notes, and snippets.

@kimroen
Forked from marcedwards/high-dpi-media.css
Created November 20, 2012 10:24
Show Gist options
  • Save kimroen/4117149 to your computer and use it in GitHub Desktop.
Save kimroen/4117149 to your computer and use it in GitHub Desktop.
A Sass media query mixin that captures almost all high DPI aware devices.
/* ----------------------------------------------------------------------- */
/* */
/* Improved upon a mixin from 37signals and combined */
/* with these numbers from marc. */
/* */
/* 37signals-version: */
/* http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss */
/* */
/* @kimroen */
/* */
/* A media query that captures: */
/* */
/* - Retina iOS devices */
/* - Retina Macs running Safari */
/* - High DPI Windows PCs running IE 8 and above */
/* - Low DPI Windows PCs with IE zoomed in */
/* - Android hdpi devices and above */
/* - Android tvdpi devices, including Google Nexus 7 */
/* - Chrome running on high DPI Macs and PCs */
/* - Opera running on high DPI Macs, PCs and mobile devices */
/* */
/* Please note that that this code assumes you'll swap a */
/* 2× version of your images. If you'd like to supply */
/* finer increments, other thresholds might be appropriate. */
/* */
/* @marcedwards from @bjango */
/* */
/* ----------------------------------------------------------------------- */
@mixin image-2x($image, $width: auto, $height: $width) {
@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi) {
background-image: url($image);
@if $width != auto {
background-size: $width $height;
}
}
}
@kimroen
Copy link
Author

kimroen commented Nov 20, 2012

How come you decided to remove the unprefixed version here? I don't see how it can hurt to leave it.

@kimroen
Copy link
Author

kimroen commented Nov 20, 2012

Marc resolved this on twitter: "It’s not part of the CSS spec. They’re using min-resolution instead of min-device-pixel-ratio."

Live and learn.

@marcedwards
Copy link

More info about min-resolution and min-device-pixel-ratio can be found here:
http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/

The good news is that you can use “dppx” for dots per px, so it's directly comparable to min-device-pixel-ratio.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment