the future of the web is collaborative and creative,
therefore it must be secure, inclusive, and accessible.

the future is now.

Common Breakpoints for Responsive Media Queries

by Tim Combs | May 19, 2020

Tags: tips_N_tricks css breakpoints media_queries

Say you are looking to provide three different responsive page layouts: one for smartphones, one for tablets or laptops, and one for desktops. Which screen widths should you target as your breakpoints (e.g., 480px)? But then you think, which tablets, which smart phones, which laptops, which desktops? So many device sizes!

evolution of mobile devices picture
Evolution of mobile devices, so many screen sizes!

Just remember we don't define breakpoints on the basis of device size. We design the breakpoints to display content in the best way. Let the content guide the breakpoints. And remember to think mobile first.

That being said, we still need a place to start, but, unfortunately, there’s no defined standard for the page widths to target, this example is fairly common: 320, 480, 600, 768, 900, 1024, and 1200px. That is seven breakpoints.

Another example from 320 and Up, which is a repository of great front-end design resources, uses five default media query breakpoints: 480, 600, 768, 992, and 1382px. Along with these two schema, I could list at least ten other approaches I've seen online.

With any of these reasonable sets of breakpoints, you can target most devices for your content. In practice, there is usually no need to separately handle all of the aforementioned examples of page widths - seven different resolutions is probably overkill. In my experience, 320, 768, and 1200px is the most commonly used schema, but, again, the content design determines the exact breakpoints.

Tags: tips_N_tricks css breakpoints media_queries