Skip to content

Instantly share code, notes, and snippets.

@ingozoell

ingozoell/retina-display-media-query.css

Created April 1, 2014 13:20
Show Gist options
  • Save ingozoell/9913831 to your computer and use it in GitHub Desktop.
Save ingozoell/9913831 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
retina-display-media-query.css
/* http://css-tricks.com/snippets/css/retina-display-media-query/ */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
/* Retina-specific stuff here */
}
Raw
support-retina-displays.css
#myimage {
width: 400px;
height: 300px;
background: url(lo-res.jpg) 0 0 no-repeat;
}
@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5) {
#myimage {
background-image: url(hi-res.jpg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment