What are CSS Breakpoints and Media Query Breakpoints

CSS media query breakpoints are essential tools in responsive web design, allowing your layout to adapt seamlessly to different screen sizes and devices.

By using media queries, developers can trigger specific styles and ensure a consistent and user-friendly mobile, tablet, and desktop experience.

This guide describes in detail about CSS Media Query Breakpoints, how to set them, common breakpoints, best practices, and more.

What are CSS Breakpoints?

CSS breakpoints are specific points, usually defined by screen width, where the layout or design of a webpage adjusts to provide an optimal viewing experience on different devices. These are design decisions that help create responsive layouts.

Example:

A layout might shift from a single-column (for mobile) to a two-column layout at a 768px breakpoint for tablets.

What are Media Query Breakpoints?

Media query breakpoints refer to the specific conditions written in CSS using the @media rule to apply styles at certain screen widths. These are the technical implementation of CSS breakpoints.

Example:

css

@media (max-width: 768px) {

  .menu {

    display: none;

  }

}

This hides the menu when the screen width is 768px or less.

CSS Breakpoint vs Media Query Breakpoint

Here are the differences between CSS breakpoints and Media Query Breakpoints:

In short: CSS breakpoints are the concept, while media query breakpoints are the implementation using CSS.

How to set CSS breakpoints for Responsive Design

There are two main approaches to follow when setting CSS breakpoints for responsive design:

1. CSS Breakpoints based on device

With the current state of device fragmentation, determining breakpoints based on the device can be challenging. New devices are released in the market with increasing frequency, and keeping up with them generally requires significant effort.

Once a new device with a new screen resolution is released, developers will have to return to the CSS and add a new breakpoint. Imagine doing this every time a device is up for sale.

Even so, to cover all bases, one can at least set breakpoints based on the most popular devices used to access a website. Use Google Analytics for this purpose. Simply follow the path below:

Audience > Technology > Browser & OS > Screen Resolution

• Set breakpoints for the 10 device screen resolutions the website is accessed from.

Additionally, use a mobile-first design approach when working on the website layout. Design the site for mobile devices first, as approximately 50% of overall web traffic comes from mobile devices.

One could also set breakpoints for common device groups instead of specific devices:

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

2. CSS Breakpoints based on content

This is an easier approach that covers more ground. In this case, breakpoints are set based on website content. At every juncture in which the content needs a change in layout, a breakpoint is added. This makes media queries easier to code and manage.

Visualize a paragraph of text. As the screen gets wider, it starts to become distorted, thus hindering readability. Adding a breakpoint here would prevent this from happening. The point of adding any breakpoint is to make content easy to read. This applies to both increasing and decreasing screen width. Whenever the content becomes harder to read because of changing screen size, add a breakpoint.

Look at some examples:

CSS kicks in when the device width is 768px and above

@media only screen (min-width: 768px){
...
}

CSS kicks in within the limits : 768px to 959px

@media only screen and (min-width: 768px) and (max-width: 959px){
...
}

Using min-width and max-width for CSS breakpoints

Setting breakpoints is easy with the min-width and max-width properties.

Using max-width helps improve the browser’s handling in the case of small screen sizes. Setting a CSS responsive width is important to access the device on smaller screens:

div.ex1 {
width: 300px;
margin: auto;
border: 2px solid #00FFFF;
}

div.ex2 {
max-width: 300px;
margin: auto;
border: 2px solid #00FFFF;
}

Here in the first div, the box (width) will not resize to fit the screen, whereas the second one (max-width) will resize.

A couple of best practices are:

• When designing with the mobile-first approach (mentioned above), start with setting min-width breakpoints. The default styles should be for smaller device screens. Then, add and adjust for larger screens.
• Conversely, when designing for larger devices, set default CSS for them, and realign for smaller screens with the max-width property.

Confused? Perform a quick check of your website across real devices. Try now.

The Media Query Breakpoints to be Used

Obviously, it’s easier to go into website development knowing which CSS media breakpoints to use. The approaches outlined above require some research (with regard to popular devices and the nature of the content), but there are some CSS media breakpoints that are likely to fit most websites.

To start with, study popular frameworks such as Bootstrap, Foundation, and Bulma.

• Bootstrap: 576px, 768px, 992px, and 1200px
• Foundation: 40em and 64em
• Bulma: 768px, 769px, 1024px, 1216px, and 1408px

These frameworks facilitate mobile-first design, which is an industry best practice at this point in time. Therefore, using these breakpoints will offer more effective levels of website responsiveness.

Talk to an Expert

Common Media Query Breakpoints

Use breakpoints for the most commonly used device resolutions used across mobile, desktop, and tablet. These would be:

• 1920×1080 (8.89%)
• 1366×768 (8.44%)
• 360×640 (7.28%)
• 414×896 (4.58%)
• 1536×864 (3.88%)
• 375×667 (3.75%)

Using Media Queries for Screen Orientation (Landscape vs Portrait)

Media queries can target not just screen width, but also orientation. This is useful when you want different layouts or styles depending on whether the device is held vertically (portrait) or horizontally (landscape).

Example:

css

@media (orientation: portrait) {

  body {

    font-size: 16px;

  }

}




@media (orientation: landscape) {

  body {

    font-size: 18px;

  }

}

This ensures better readability and layout adjustment based on how a device is held.

Browser Compatibility Issues in CSS Media Query

While media queries are widely supported, certain cases and older browsers may pose challenges.

Common issues:

• Older versions of Internet Explorer (especially IE8 and below) have limited or no support.
• High-resolution or unusual aspect ratio devices may require custom breakpoints.
• Some media features (like hover, aspect-ratio) may behave inconsistently across devices.

Pro Tip: Always test across multiple browsers and devices using tools like BrowserStack to ensure consistent behavior.

Best Practices to follow when using Media Query Breakpoints

Here are the best practices to follow when using Media Query breakpoints:

• Start with a mobile-first approach: Write base styles for the smallest screen, then build upward using min-width media queries.
• Use relative units: Use em or rem instead of px to make breakpoints more flexible across different base font sizes and devices.
• Avoid overlapping breakpoints: Ensure your min-width and max-width ranges don’t conflict. Overlaps can cause unpredictable styling and maintenance issues.

Example: Avoid this conflict:

css

@media (max-width: 768px) { ... }

@media (min-width: 768px) { ... }  /* Overlaps at exactly 768px */

Instead, separate them clearly:

css

@media (max-width: 767px) { ... }

@media (min-width: 768px) { ... }

• Keep breakpoints minimal: Don’t add a breakpoint for every device — focus on where your layout breaks, not on device types.
• Organize breakpoints by layout change: Group them by design logic (e.g., nav collapse, grid reflow) rather than screen size labels.
• Test on real devices: Use platforms like BrowserStack to verify that breakpoints behave correctly across actual browsers and devices, especially for edge cases.

Conclusion

Obviously, identifying and using CSS breakpoints for responsive design and media queries for all devices is not humanly possible. The best option is to deploy CSS media queries and breakpoints that fit the device preferences of the target audience. Additionally, keeping the content adjustable and adaptable to change would also help to accomplish more in the long-term with reasonable levels of effort.

Once a website has been designed and breakpoints incorporated, remember to test them on real devices to check their responsiveness. Depending on the number of screen sizes in question, checking responsive design is easiest when using a real device cloud.

BrowserStack offers 3500+ real browsers and devices for instant, on-demand cross browser testing on the cloud. Simply sign up for free, choose from among the latest devices, navigate to the relevant website, and start verifying its responsive design.

Try Cross Browser Testing for Free