Taming Retina CSS – Part 1

February 17, 2013 - By
I’ve recently been making use of the Retina Display Media Queries post on CSS Tricks to upgrade some of the graphics on a site I’ve been working on. My issue is the testing. Where I work we have a handful of “Retina” devices (I don’t think I’m alone in using the Apple-coined term generally for all brands), but not a desktop screen that will allow me to test the responsive sizing of the images at various viewports by resizing my browser. Here’s the solution I’ve been using:
.wrapper {
     background:url(img/image.jpg);
}
 
 
@media 
(height: 899px),
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
     .wrapper {background:url(img/image@2x.jpg);}
}
By adding a very specific height condition to my media query (seems like a good place to give a shout out to vertical responsive web design) I can now test this on a non-retina screen to make sure the thing at least works!
Of course, you should try to remember to remove that before going to production!

Categorized in:

This post was written by ArleyM