Common Breakpoints For Media Queries on a Responsive Site

Common breakpoints for media queries on a responsive site

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)

What are the best CSS Media Queries to act as a catch-all for the most common types of devices?

In retrospect, I admit that this question I asked is broad as well as a bit vague. This is partly due to me not keeping up-to-date with the latest trends in front-end design, as well as a misunderstanding and misconceptions of the art and science around responsive web design.

However, I argue that this question should remain (if not on Stack Overflow, at least on somewhere more relevant on the Stack Exchange network), as the comments I have received have helped me a lot to better understand the fundamentals of how to actually implement a responsive design, and could also be beneficial to others in a similar situation.

Although there is no black-and-white answer to my question, thanks to those who have commented, I think that the best guidelines for responsive web design in general, are to:

  • focus on the project specifics
  • design with the content itself in mind

(Both points suggested in the comments by CBroe.)

I have also found the following articles helpful:

  • Justin Avery: “Why you don’t need device specific breakpoints”
  • Google Developers: “How to choose breakpoints”
  • Nick La: “Setting Breakpoints in Responsive Design”

I also think that these articles from A List Apart, although published in 2000 and 2010 respectively, are excellent resources – both help you to understand the fundamental philosophy behind responsive web design:

  • John Allsopp: “A Dao of Web Design” (2000)
  • Ethan Marcotte: “Responsive Web Design” (2010)

Media Queries: How to target desktop, tablet, and mobile?

IMO these are the best breakpoints:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Edit: Refined to work better with 960 grids:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

In practice, many designers convert pixels to ems, largely because ems afford better zooming. At standard zoom 1em === 16px, multiply pixels by 1em/16px to get ems. For example, 320px === 20em.

In response to the comment, min-width is standard in "mobile-first" design, wherein you start by designing for your smallest screens, and then add ever-increasing media queries, working your way onto larger and larger screens.

Regardless of whether you prefer min-, max-, or combinations thereof, be cognizant of the order of your rules, keeping in mind that if multiple rules match the same element, the later rules will override the earlier rules.

Responsive design - Standard Breakpoint/Media queries for smartphone and tablet

There is two way of thinking your CSS media querys.

First one is to go 'Desktop First'. That mean that your base CSS will aim at large screens and then your media query will overwrite your classes to adapt to smaller classes. Your CSS could go like this :

/* Large screens ----------- */
/*some CSS*/

/* Desktops and laptops ----------- */
@media only screen and (max-width : 1824px) {...}

/* iPads (landscape) ----------- */
@media only screen and (max-width : 1224px) {...}

/* iPads (portrait) ----------- */
@media only screen and (max-width : 1024px) {...}

/* Smartphones (landscape) ----------- */
@media only screen and (max-width : 768px) {...}

/* Big smartphones (portrait) (ie: Galaxy 3 has 360)*/
@media only screen and (max-width : 640px) {...}

/* Smartphones (portrait) (ie: Galaxy 1) */
@media only screen and (max-width : 321px) {...}

The second approach is to go 'Mobile First'. That mean that your base CSS will aim at small screens like the IPhone 4. Then your media query will overwrite your classes to adapt to bigger screens. Here's and example :

/* Smartphones (portrait) ----------- */

/* Ipad2 (portrait) ----------- */
@media only screen and (min-width : 768px){...}

/* Ipad2 (paysage) ----------- */
@media only screen and (min-width : 1024px){...}

/* Ordi (Petit) ----------- */
@media only screen and (min-width : 1224px){...}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1824px){...}

If you really want to go into details and take advantage of the retina display, you will have to play with the pixel ratio. Take a look at this overkill css style sheet : media-queries-boilerplate.css. One of the nice thing to do with the retina display is to provide higher quality images to the client. The downside it that it take more bandwith and make the site slower.

I hope this help you.



Related Topics



Leave a reply



Submit