css - Common breakpoints for media queries on a responsive site

Question

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?

Answer 1

• This is a pretty useful guide for mobile screen sizes.
• Great guide for stats on screen resolutions
• Google Analytics data on resolutions can be valuable as well, if you have access to it.

Also, I would definitely recommend using device-width for your mobile sizes, unless you want users to see your mobile styles when they resize their browser window on a non-mobile device. width is the width of the viewport, and device-width is the current resolution of the device.

Also, I think I have read that some mobile devices don't behave as expected (with @media).

You are correct. Many devices will not give you the width or device-width that you expect, especially when switching between landscape and portrait (they will often give the landscape width when in portrait). Device auto-zooming can also throw a wrench into things. Using the viewport meta tag can help with many of these issues. (More info on that here)