Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Common breakpoints for media queries on a responsive site

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?

like image 563
Zach Lysobey Avatar asked Dec 19 '11 17:12

Zach Lysobey


People also ask

How many breakpoints at minimum are recommended for use on a responsive website?

Typically, breakpoints are shared for mobile, tablet, and desktop. Depending on the size you scale it to, the content adjusts accordingly. It is recommended to use at least three breakpoints.

What are the responsive breakpoints?

A breakpoint in a responsive design is the “point” at which a website's content and design will adapt in a certain way in order to provide the best possible user experience.


2 Answers

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

like image 168
Drew Gaynor Avatar answered Oct 05 '22 16:10

Drew Gaynor


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)
like image 22
Michael Benjamin Avatar answered Oct 05 '22 15:10

Michael Benjamin