Which Responsive Media Query Breakpoints should you use in 2023?

This article I will go over the reponsive breakpoints I use for my media queries in 2023 when coming up with a responsive design.

This is based of the Bootstrap media query breakpoints.

My approach is not going overboard with trying to cater for all device sizes or orientation. At some point, the amount of CSS you stuff in

your media query can degrade the experience. Additionally having too many breakpoints can distract from build a great experience/ layout for the minority

and neglect the majority. You define breakpoints based on design and not device.

TDLR; use the below CSS:

// X-Small devices (portrait phones, less than 576px)

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

This method is whats described as mobile-first. We first design for the lowest viewport and move our way up to larger

displays.

An alternative way is to use max-width. This allows us to go the other direction. Design for desktop first and move

down to smaller screen sizes.

// X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

The above, uses max-width to determine the breakpoints.

Why are we offsetting 0.02px?

Notice how we need to subtract 0.02px - this is due to the issue with using min- and max- prefixes range features.

According to W3C:

Because “min-” and “max-” both equate to range comparisons that include the value, they may be limiting in certain situations.

https://www.w3.org/TR/mediaqueries-4/#mq-min-max

As an example, consider the following @media query where we try to make sure that both queries don’t evaluate to true simultaneously. We create a max width 320px and a min-width 321px

@media (max-width: 320px) { /* styles for viewports <= 320px */ }
@media (min-width: 321px) { /* styles for viewports >= 321px */ }

The above is fine, but it does not take into account the possibility of fractional viewport sizes. This can happen with non-integer pixel

densities (eg high-dpi/ retina displays or as a result of zooming/scaling).

A fix for this would be adding 0.02px to reduce the viewport falling between the “cracks” address the Safari/ iOS bug:

https://bugs.webkit.org/show_bug.cgi?id=178261

@media (max-width: 320px) { /* styles for viewports <= 320px */ }
@media (min-width: 320.02px) { /* styles for viewports >= 320.02px */ }

Breakpoint values for common devices

In the below table you can find breakpoints for common devices. Its generally not recommended to design to a specific

device. However, if you find yourself in a scenario where this is necessary, use the following table.

(Note: the values are in pixels)

So with the table above, if you want to target iPhone SE in portrait mode we will need to use the device width column as the min-width.

So would have the following media query:

@media only screen and (min-width: 320px) and (max-width: 767px) { /* Your Styles... */ }

Now if you want to target the iPhone SE in landscape mode, we use the device height column as the min-width. We will also need

to declare orientation: landscape as follows:

@media only screen and (min-width: 568px) and (orientation: landscape) { /* Your Styles... */ }

What are media queries and breakpoints

With responsive design, breakpoints and media queries are the fundamental building blocks. Breakpoints allow you to define how a layout

behaves for each device or viewport size. Once we know our breakpoints, we can use media queries CSS to define each style.

For example, from the below, we want to hide the .navigation class when the device width is less than 576px - eg small phones thats

using portrait mode.

// X-Small devices (portrait phones, less than 576px)
@media screen (max-width: 576px) 
{ 
  .navigation
  {
    display:none;
  }

}

Common breakpoints used by CSS frameworks

The below shows common breakpoints used by popular frameworks such as Bulman, Bootstrap, Tailwind and Zurb Foundation.

Responsive design tip #1: prefer rem instead of pixels or em units

Preferably you should aim to use rem (instead of em or pixels) on for response designs. This allows your design to

flow relative to the device screen size.

• rem: The relative computed value based on the font-size of the root element.

• em : The relative computed value cased on the font-size of the parent element

Most browsers, the default font-size is 16px, so that means 1rem would be 16 pixels. If you decide to use em,

this could lead to some unexpected results since the size is based on the parent element and cascades can cause

unexpected results (eg font sizes progressively getting larger as more nested elements added).

So rem I usually find easier to remember.

Responsive design tip #2: prefer min-width over max-width

With mobile first design, its prefered to design against min-width than max-width. Our general proces would be designing

for the smallest device screen (eg mobile) then move our way up to the desktop displays. Additionally the majority of CSS frameworks

such as Bootstrap, Bulma, Foundation recommend using min-width.

Using max-width can be appropriate when you are adding mobile media queries to a existing desktop design.

Final thoughts

I have gone through the breakpoints that I use for my CSS media queries. This is largely based on the bootstrap defined breakpoints.

Consider responsive layouts based on general design instead of specific device breakpoints. Make sure to use “rem” over “em” or “px” (pixel)

units. Additionally approace responsive design as mobile first - so consider using min-width over max-width @media queries.