What media query breakpoints should you use? (2023)
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. Try to stick with these three breakpoints:
As Recommended by Coder Coder
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.
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.
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.
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-width, max-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.
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 em, rem, 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.