So I am working on my first responsive website which makes extensive use of media queries. I was wondering if there are some common page-widths I should optimize for.
I will probably have a maximum width (not going full fluid) I am thinking I'll have maybe 3-5 set widths with fun little CSS3 transitions between them (similar to how CSS Tricks works).
Currently the numbers I am using are somewhat arbitrary:
@media all and (max-width: 599px){...}
@media all and (min-width: 600px) and (max-width:799px){...}
@media all and (min-width: 800px) and (max-width:1024px){...}
@media all and (min-width: 700px) and (max-width: 1024px){...}
@media all and (min-width: 1025px) and (max-width: 1399px){...}
@media all and (min-width: 1400px){...}
Also, I think I have read that some mobile devices don't behave as expected (with @media
). Where does this come into play and how should I deal with these situations?
When deciding on breakpoints for your media queries, consider these realities:
With so many viewport possibilities, matching breakpoints to specific devices doesn't sound like an efficient strategy. Just keeping up with what's popular, what's new, and what's changed will be a never-ending task.
A better approach may be to set breakpoints based on content and layout.
With this approach your site uses its natural breakpoints to adapt to all viewport sizes, rather than artificial breakpoints targeting currently common screen sizes.
This method is so simple and easy it may be hard to believe:
Of course, if you're designing mobile-first, then the process goes in reverse: Start with a narrow screen and work your way out.
With natural breakpoints you no longer need to focus on a giant universe of viewport sizes because your site will adapt to any device, both now and in the future.
According to one developer, this approach brings breakpoints full-circle to their original intent:
I'm not sure how we ever came up with the phrase "device-specific breakpoints" anyhow... As I've understood it, the term "breakpoint" was always a reference to where the content or layout would "break" (i.e. appear flawed) and thus you'd need to apply a media query at that point. But I guess that's just semantics, I just always thought it was common sense to refer to breakpoints in the context of content or layout.
~ Louis Lazaris, ImpressiveWebs
More information (external sites):