Book Image

Responsive Design High Performance

By : Dewald C Els, Dewald Els
Book Image

Responsive Design High Performance

By: Dewald C Els, Dewald Els

Overview of this book

Table of Contents (16 chapters)
Responsive Design High Performance
About the Author
About the Reviewers
Speeding Up Development with Design Concepts, Patterns, and Programs

Retina displays

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:

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