Skip to content

Instantly share code, notes, and snippets.

@robpataki

robpataki/retina.css

Created September 10, 2015 15:00
Show Gist options
  • Save robpataki/598950ada5e4512c8cdb to your computer and use it in GitHub Desktop.
Save robpataki/598950ada5e4512c8cdb to your computer and use it in GitHub Desktop.
Download ZIP
Retina background image CSS
Raw
retina.css
.icon {
background-image: url("social-icons.png") 0 0 no-repeat;
}
/* 1.25 dpr and up - including retina devices */
@media
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi){
.icon {
background-image: url("social-icons@2x.png");
background-size: 256px 256px;
}
}
@robpataki
Copy link
Author

Based on http://brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/

It seems like this single style definition works well on true retina MacBook Pro 13, iPhone 5s, iPhone 6 (pixel density: 2), just as well as on a Nokia Lumia 520 (pixel density 1.422...)

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