Media queries

What media query breakpoints should you use? (2020)

When you’re building a responsive website, it can be confusing to know exactly how to write media queries, and which breakpoints are good to should use.

Should you use min-width or max-width in your media queries? And what devices should you target in your breakpoints?

We’ll answer those questions and more in this tutorial.

So first, a bit of context:

What are media queries in CSS?

Media queries are a type of CSS at-rule which we can use to target specific conditions for sets of CSS styles.

They are what make responsive design possible. In responsive design, we usually use device widths as the criteria when writing media queries. That way we can use different CSS rules depending on whether the user is loading the website using a phone, tablet, or desktop screen.

Let’s take a look at how media queries can be used. Here is a quick example of some CSS for the h1 element:

h1 {
  font-size: 3rem;
}

@media (min-width: 43em){
  h1 {
    font-size: 3.75rem;
  }
}

In this example, at the top, we are first setting the default font-size of the h1 tag at 3rem.

Then below that, we have a media query at-rule, with a CSS style rule nested inside it. This alternate rule will set the font-size for h1 elements at 3.75rem.

Media query syntax

Taking a closer look at the media query itself, we can see that it’s made up of two parts:

The media feature that we’re targeting is the width of the user’s viewport (their screen or browser window size). We’re targeting a range of widths by using min-widthin the media feature rule, so that any viewport at 43em (688px) or greater will meet the criteria.

If the user’s viewport meets the criteria of the media query, then the CSS rule in that media query will take effect. It will override the first CSS rule because the CSS in the media query is more specific than the first rule.

What are breakpoints in CSS?

In responsive design, the widths that we target in our media queries are called breakpoints, because that is the point at which we will change the CSS rules.

For example, for our h1 tag styles, our breakpoint is at 43em (688px) wide.

What this means is that at viewports less than 688px wide, the h1 elements will have a font-size of 3rem. Then at 688px and greater, any h1 tags will be 3.75rem instead.

You can also have more than one breakpoint for CSS selectors. You might add on additional media queries to continue changing the h1 size as the viewport increases to 62em (992px) and 87em (1392px) wide.

You can create as many breakpoints as you would like, and you can use any width that you would like.

There’s a lot of freedom in terms of setting breakpoints. So then, how many breakpoints should you use in your media queries? And what widths should you use?

What breakpoints should you use?

Here’s one rule of thumb– don’t try to create tons of media queries with breakpoints targeting every device width that exists.

This was a practice back in the early days of responsive design. But nowadays, with so many different phones, tablets, and screen sizes, it’s simply not practical. You’ll only end up with a confusing (and inefficient) number of media queries.

Instead, try to choose breakpoints based on your design.

For example, let’s say you have a design that you want to be two columns on desktop and stacked to one column on mobile and tablet devices.

Mobile design with one column

Starting with mobile widths and moving up, choose the viewport width point at which you want the design to change to two columns. This will be your breakpoint.

Desktop design with two columns

In general, I usually start with a range of three or four breakpoints that cover widths from mobile up through large screens.

Let’s say that you set breakpoints at 43em (688px), 62em (992px), and 82em (1312px) wide. You know that phones will all be under 688px, most tablets will fall somewhere between 688px and 992px, smaller screens will be between 992px to 1312px, and larger screens will be greater than 1312px.

This approach lets you cover any all devices within those ranges of viewport widths.

Media query diagram

Working with a smaller set range of breakpoints will help you keep your responsive styles consistent. And I’d definitely encourage you to first choose a set of breakpoints, and use those same breakpoints for all elements across your project.

This way, you aren’t creating random breakpoints at all different widths, and creating potentially unexpected behavior. Keep things simple, and stick to one set of breakpoints. You can always add an additional breakpoint if you really need to later on.

Should you use min-width or max-width in your breakpoints?

One common question I see a lot is if you should use min-widthmax-width, or both in your media query breakpoints.

The approach that I see most people using, and which I myself prefer, is to use only min-width in your breakpoints. Responsive frameworks like Bootstrap and Foundation, and industry sites like CSS Tricks and Smashing Magazine all use this method.

This way, you can set the mobile styles as your default styles without any media queries. Then you add styles for progressively larger devices using min-width media queries.

This mobile-first approach is what we did in our h1 example. It works quite well for the majority of cases, especially because the larger viewport widths tend to require additional CSS styles that you don’t need for mobile widths.

Curious what that would look like in a real world application?

Let’s say that we want to use flexbox to create a two column layout for a website.

In our HTML markup, we have two elements in our <body> tag: <main> for the main content, and <aside> for the sidebar:

<body>

  <main class="blue">
    <h1>Here is our main content!</h1>  
  </main>

  <aside class="magenta">
    <h2>Here is our sidebar content!</h2>
  </aside>

</body>

In our CSS styles, we want to stack the sidebar under our main content so everything is in one column. So we don’t need any additional styles for mobile.

On larger desktop widths, we want to turn on flexbox and display the layout in two columns. We can do this in CSS by creating a media query with a criteria of 62em (992px) that will take effect starting at smaller desktop widths.

Here’s the CSS for that:

@media (min-width: 62em){
  body { display: flex; }  
  main { flex: 1 0 75%; }
  aside { flex: 1 0 25%; }  
}

Now, what if instead we wanted to use max-width media queries? It’s definitely possible, but we would have to cancel out the flexbox for mobile and tablet widths like this:

body { display: flex; }
main { flex: 1 0 75%; }
aside { flex: 1 0 25%; }

@media (max-width: 62em){
  body { display: block; }
}

In this case, our default styles for desktop use flexbox. And we have to cancel out flexbox for viewport widths smaller than 62em (992px) by setting the <body> to display: block instead of display: flex.

Should you use pixels, rem or em in your breakpoints?

You may have noticed that I’m using em units in my breakpoints instead of pixels. Pixels are more familiar to most of us, but they are absolute units in CSS. This means that they do not change in relation to any other factor.

In contrast, relative units such as emrem, and vw units get their final size based on other factors such as the font-size of their parent element or the root font-size set in the browser.

To convert em to pixels for breakpoints, you can multiply the em x 16 to get the final pixel amount. The 16 is because browsers have their default font size set to 16px. It takes a bit of math to calculate it out, but again, once you’ve determined which breakpoint widths you will be using, you can reuse them for all your media queries.

The problem with using pixels in CSS (not only in breakpoints, but for font size) is that being absolute and unchanging, they don’t give users control to adjust them if necessary. This is an issue with accessibility, and so it’s generally not a great solution to use pixels for important measurements like font-size and breakpoint widths.

Zell Liew has a great write-up of tests he did with breakpoints and different units, concluding that em breakpoints were “the only unit that performed consistently across all four browsers.” There are some bugs in Safari that  Dan Burzo documented, where when zooming in the mobile breakpoint displays sooner than it should.

I would prioritize accessibility over Safari bugs, so I still use em units.

I hope this article has helped explain what breakpoints you should use in your media queries!

Want to learn how to build a website?

I'm making a course that will teach you how to build a real-world responsive website from scratch!

Learn more

Comments

W
Walter
Mar 25, 2020 at 11:52 am

Thank you for giving a clear answer to that important question: at what width should I set a breakpoint?
This will help very much for creating a new CSS.
Walter

Reply

Write a Comment

at
Reply