Blog
Select Page

Best Media Queries for Responsive Web Design

Misc

Best Media Queries for Responsive Web Design

The following breakpoints and media queries are originally taken from the Bootstrap 5 website, so they can be used by anyone in common with or without using including the Bootstrap 5 framework.

Bootstrap (Front-end framework b Twitter) has been consistently developing good framework solutions for responsive web designs taking care of all modern devices and trends. You can use that through their website (link at the bottom of this post) and use the starter template to start developing your pages and use these media queries by including a separate CSS file.

Media Queries

Mobile-First / Smaller to Larger / Min-width

Mobile-first is a CSS style approach aiming to apply the minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices. This optimizes your CSS, improves rendering time, and provides a great experience for visitors using various devices.

// 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) { ... }

Desktop-First / Larger to Smaller / Max-width

(the given screen size or smaller)

// 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) { ... }

// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width

What are Breakpoints?

Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.

Bootstrap 5 includes six default breakpoints. they don’t specifically target every use case or device, but instead, provide a strong and consistent foundation to build on for nearly any device.

Here are the six breakpoints:

  • X-Small < 576px
  • Small ≥ 576px
  • Medium ≥ 768px
  • Large ≥ 992px
  • Extra large ≥ 1200px
  • Extra extra large ≥ 1400px