Trivial Tips

Resolutions in Media Query

W3C Compliant (dppx)

@media only screen and (min-resolution:    1dppx) { /* low  */ }
@media only screen and (min-resolution: 1.25dppx) { /* mid  */ }
@media only screen and (min-resolution:    2dppx) { /* high */ }

Result :

W3C Compliant (dpi)

@media only screen and (min-resolution:  96dpi) { /* low  */ }
@media only screen and (min-resolution: 120dpi) { /* mid  */ }
@media only screen and (min-resolution: 192dpi) { /* high */ }

Result :

Webkit

@media only screen and (-webkit-min-device-pixel-ratio: 1   ) { /* low  */ }
@media only screen and (-webkit-min-device-pixel-ratio: 1.25) { /* mid  */ }
@media only screen and (-webkit-min-device-pixel-ratio: 2   ) { /* high */ }

Result :

Opera

@media only screen and (-o-min-device-pixel-ratio: 1/1) { /* low  */ }
@media only screen and (-o-min-device-pixel-ratio: 5/4) { /* mid  */ }
@media only screen and (-o-min-device-pixel-ratio: 2/1) { /* high */ }

Result :

Combination

@media
    only screen and (-webkit-min-device-pixel-ratio: ...),
    only screen and (-o-min-device-pixel-ratio: ...),
    only screen and (min-resolution: ...dppx),
    only screen and (min-resolution: ...dpi) { ... }

Result :
window.devicePixelRatio :