Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS: Retina Display Media Query
/*
http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/
http://css-tricks.com/snippets/css/retina-display-media-query/
*/
@media only screen and (min-width: 320px) {
/* Small screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min-resolution: 192dpi) and (min-width: 320px) {
/* Small screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 700px) {
/* Medium screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min-resolution: 192dpi) and (min-width: 700px) {
/* Medium screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 1300px) {
/* Large screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min-resolution: 192dpi) and (min-width: 1300px) {
/* Large screen, retina, stuff to override above media query */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment