Since we live in a world where technology changes at a rapid pace, it's inevitable that techniques we use in our coding will become stale and limited. We have to start using hacks to make things work the way we want to or even just work at all. Media queries are no different, and they are becoming more complex with the addition of high-resolution displays such as retina displays.

Something might look great on your 1080p desktop screen, but on a hi-res retina display it may seem a bit out of proportion.

So, how do we circumvent this hindrance?

Chris Coyier, who is one of the founders of CodePen, has made a retina-ready media query example that looks like this:

@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...