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?

Swizzle

While listing devices' screen sizes might be useful (if you're targeting a device or devices), I think it'd be better to target sizes. And to know which sizes are more frequent than the others, I've created a repository. – Rambunctious

Answer 1

When deciding on breakpoints for your media queries, consider these realities:

• There are hundreds of different screen sizes across thousands of different devices.
• The future will bring new screen sizes.
• Apple, Samsung, Microsoft, LG, Nokia and any other device manufacturer can, at any time, change the screen size of their popular models.

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:

1. Run your website on a desktop or laptop.
2. As you narrow the browser window, notice how the website responds.
3. When you reach the point where your layout is no longer perfect, that's your first breakpoint.
4. Adjust your site for that screen size (which may have no relation to any device).
5. Keep narrowing the browser window.
6. When you hit the next layout problem, that's your second breakpoint.
7. ... and so on and so forth.

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

_{source: https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints#comment-1685967450}

---

More information (external sites):

• Why You Don't Need Device Specific Breakpoints
• Setting Breakpoints in Responsive Design
• Google Developers: How to choose breakpoints
• The Goldilocks Approach to Responsive Design
• Viewport Sizes (a list of hundreds of devices and viewport sizes)
• Media Queries for Standard Devices (a list of media queries targeting popular devices)

Schwing

I like the concept, I am wondering why browsers have developer tools, notable the updated device mode in Chrome that simulate devices - when all you need to do is adjust your own display window? – Estivate

What I am trying to get at precisely is, Device Mode is still supporting the practice of targeting devices rather than letting the content dictate where to apply media queries, when this has been proven an unworkable approach - why? – Estivate

@Brownrice, because many developers still target specific devices, even if it's not the best method for responsive design. And what about developers building an app only for an iPad? Or an Android tablet? I would think those Chrome tools would be quite helpful. – Schwing

This is the only approach that makes sense. Its a bit more work but guarantees that your website looks great everywhere! – Slurry

Answer 2

• 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)

Sully

If you want to support older windows mobile phones, make sure and use respond.js. – Crain

@JackieChiles, great share! I found the Mobile Matrices very useful for my current project.@Zach L, Iam using Twitter Bootstrap for my responsive design learning. If you want to use this in your production, you'd better customize the media queries. – Noachian

So, screen resolutions nowadays (according to this page) indicates that, if you want to apply a minimal level of responsive design, with min-width: 768px should be enough. – America

Another good link which provides a table of different devices' resolutions: screensiz.es – Swizzle

Answer 3

This is what I use...

@media screen and (max-width:320px) {}
@media screen and (min-width:321px) and (max-width:639px) {}
@media screen and (min-width:640px) and (max-width:959px) {}
@media screen and (min-width:960px) and (max-width:1279px) {}
@media screen and (min-width:1280px) and (max-width:1599px) {}
@media screen and (min-width:1600px) {}
@media screen and (min-width:1920px) {}
@media print {}

There are all kinds of others in there, as appropriate (min-width without max-width or max-width without min-width), but this is my base setup.

Personally, I never understood the odd widths that a lot of people use. For instance, 320 and up has Five CSS3 Media Query increments: 480, 600, 768, 992 and 1382px.

That doesn't make any sense to me. Logical breaks are at intervals of 320px (320, 640, 960, 1280, 1600, 1920). Note that these breaks can give a slightly different layout for pretty much any device in either orientation (omnia is 240x400, iphone is 320x480, droid x is 480x858, ipad is 768x1024, galaxy s3 is 720x1280, and they are talking 1920x1080 tablets).

JJ

Crain

Indeed, I also find codes that starts from bigger to smaller sizes, quite a mistery to me. – Bitchy

For grid based CSS, the grid width could be an interesting breakpoint, so the 992-1381 range is probably for "960px grid + slighly border" and 1382+ for "wide screens". – Mothball

Since my answer keeps getting upvotes, I wanted to make a slight change. I've found all those breakpoints to be a bit cumbersome, so I've whittled it down. Now, I'm using intervals of 480px (instead of 320px). (max-width:480px), (min-width: 481px) and (max-width: 960px), (min-width: 961px) and (max-width: 1440px), (min-width: 1441px). If you wanted to target even higher resolutions, intervals of 480px would grant you 1920px as the next breakpoint. – Crain

Another thing that I've found is that if you (min-width:1280px) you can't width:1280px in your CSS. That will result in a horizontal scroll bar, because of the vertical scroll bar. You need to subtract around 17px (width:1263px should work). – Crain

Just an FYI, if you use min-width in ascending order, you don't need to specify "and max-width" as the next min-width increment's styles will take precedence – Phyl

Answer 4

some resolutions to look for:

iphone screen (a lot of other smartphones have similar screen sizes: 960-by-640-pixel resolution at 326 ppi http://www.apple.com/iphone/specs.html

ipad screen (a lot of other tablets have similar screen sizes 1024-by-768-pixel resolution at 132 pixels per inch (ppi) http://www.apple.com/ipad/specs/

'normal' screen a lot of normal screens also have a 1024-by-768-pixels resolution, according to: http://www.w3schools.com/browsers/browsers_display.asp but I'm not vouching for their trustworthyness.

I'm looking for more data now.

Vizier

Not to resurrect, but on the website for the company that I work for, 1024x768 represents the single most common resolution (and not that many are ipad). That's not to say that it represents the largest chunk, but it is the single most common. – Crain

@doubleJ: the issue is that even if the most common screen's size is 1024x768, the window's size isn't. So you should be careful with this statistic. – Fibre

Answer 5

Based on my own needs, I came up with the following ... I call this breakpoints "For Mature Eyes" or "40+" :)

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

body { font-size: 18px; }            /* some font size for small viewport */

/* small viewport navigation (hamburger) */ 
      
@media screen and (min-width: 1100px) {
body { font-size: 20px; }            /* some font size for big viewport */
/* css for big viewport navigation */
}

@media screen and (min-width: 1540px) {
body { font-size: 22px; }              /* some font size for large viewport */
/* eventually css for large viewport */
}

</style>
</head>

Small viewport - no @media / small viewport menu, small fonts...

Big viewport - @media | min-width: 1100px / big viewport menu, middle fonts...

Large viewport - @media | min-width: 1540px / big fonts...

Why 1100px and 1540px ? Of course it is personal, but maybe it will be interesting for someone... Because of my eyes I use Windows 125% scaling and at 1920px monitor it becomes 1536px. On my 10" laptop with 1366px monitor and 125% scaling it becomes about 1093px (1100px will eventually cover and future large-resolution mobile phones in landscape).

Here you can check scaling if you use it: www.sirmium.org/test/px.html

Here you can find above breakpoints example (font scaling): www.sirmium.org/test/breakpoints.html

P.S. Of course, you can add Middle viewport or so...

Dincolo