Taming Retina CSS – Part 1

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:

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!