Skip to content

Instantly share code, notes, and snippets.

@denisinla
Created February 7, 2015 01:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save denisinla/34a2cbeda1c3e2bcaefa to your computer and use it in GitHub Desktop.
Save denisinla/34a2cbeda1c3e2bcaefa to your computer and use it in GitHub Desktop.
Media Query for targeting device ratio and DPI.
.box {
background: url( 'img/box-bg.png' ) no-repeat top left;
width: 200px;
height: 200px;
}
@media only screen and ( -webkit-min-device-pixel-ratio: 1.3 ),
only screen and ( min--moz-device-pixel-ratio: 1.3 ),
only screen and ( -o-min-device-pixel-ratio: 2.6/2 ), /* returns 1.3, see Dev.Opera */
only screen and ( min-device-pixel-ratio: 1.3 ),
only screen and ( min-resolution: 124.8dpi ),
only screen and ( min-resolution: 1.3dppx ) {
.box {
background: url( 'img/box-bg@2x.png' ) no-repeat top left / 200px 200px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment