What are CSS Breakpoints and Media Query Breakpoints [2022 UPDATED]

The point at which information and design of website adjust to offer optimal user experience is known as the breakpoint in a responsive design. Breakpoints can be defined in CSS primarily as pixel values by developers and designers.

However, selecting a strategy for adding a breakpoint might be challenging. There isn’t a single guideline or syntax that all frameworks must follow. To ensure responsiveness, you can utilize a media query. A media query is a command inserted in a CSS property and performed when a condition is met, such as a specific orientation or the screen viewport size. 

In this article, you’ll learn the basics of CSS breakpoints and media query breakpoints for a responsive website. Transform your website leveraging the media query CSS breakpoints and offer optimal user experience in no time!

What are CSS Breakpoints?

CSS breakpoints are used to adjust the styling of a web page to match the screen width of the device it is being viewed on. The most common breakpoints are based on the width of the device screen, but other criteria, such as screen resolution, can also be used. Read here – Common Screen Resolutions.

A breakpoint is a point at which responsive web pages change their layouts. Breakpoints can be used to hide or show certain elements, change the font size, or even alter the site’s overall layout. 

In short, CSS breakpoints provide a way to ensure that your site looks its best regardless of the device it is being viewed on. While there is no hard and fast rule for what breakpoints should be used, values of common CSS breakpoints are 320px or 480px (for mobile phones), 768px (for tablets), and 1920px (for desktop computers). Ultimately, it is up to the designer to decide what breakpoints make sense for their project.

In general, the more content a web page has, the more breakpoints it will need. When designing a responsive website, it is important to think about how the content will flow at different screen sizes. For example, you may need to rearrange elements or hide certain pieces of content on smaller screens. By planning and using CSS breakpoints wisely, you can create websites that look great on any device.

To understand better, let us take a CSS breakpoint example –

When visiting The New Yorker website on a normal desktop monitor, the entire navigation menu appears across the header of the page. However, since the iPhone has a smaller screen, the navigation bar will appear as a hamburger menu on the left.

Read here – A Complete Guide To Crafting Great Headers using CSS

Desktop View –

Mobile View –

How to Set CSS Breakpoints for Responsive Design

Choosing the media query CSS breakpoints is the hardest part. However, when it comes to CSS breakpoints for responsive designs, there are two primary approaches –

• Device-based breakpoints
• Content-based breakpoints

CSS Breakpoints – based on the device

In the recent state of mobile testing and device fragmentation, it is challenging to determine media query CSS breakpoints based on the device type. Due to the rapid advancement of technology and the appearance of new devices, this approach might not be viable. It is becoming increasingly difficult to keep up with the rapid release of new devices on the market. With each new device being released in the competitive market, the developers must add a customized CSS breakpoint compatible with the device. 

You can at least include all major devices and then apply common media query breakpoints to them depending on your website’s purpose and the intended audience. According to a poll, about 50% of web traffic comes from mobile devices. Therefore, in the modern day, where smartphones have become an essential part of our lives, mobile-first site designs have evolved into an important requirement!

Let us look into some of the device-specific CSS breakpoints’ examples –

iPhone 12 Mini

iPhone 11

OnePlus 6

Alternatively, breakpoints can be set for groups of devices rather than specific devices, for example –

CSS Breakpoints – based on content

To implement CSS media query breakpoints, it is preferable to leverage website content to cover more scenarios rather than using device-based breakpoints. This method merely establishes a breakpoint at each location when the content layout is out of alignment. This approach considerably streamlines the installation process and makes managing media queries much easier.

Content-based breakpoints are comparatively easier to code and manage. Some examples of content-based CSS breakpoints media queries are –

For screen resolutions with 768px and above

For screen resolutions ranging between 769px and 960px

Using Min-Width and Max-Width for CSS Breakpoints

As already stated in the examples above, we have used two breakpoints for devices with variable resolutions. However, it is possible to add CSS breakpoints using min-width, max-width, or a combination of the two. 

Now, which one to use, where, and when?

A couple of the best ways to use media query CSS breakpoints using min-width and max-width are –

• Set min-width breakpoints initially when using the mobile-first method, as discussed above. Smaller device screens should be the default styles. Then, for larger screens, include, modify and adjust as needed.
• Alternatively, if you’re designing for large screens, use default CSS for them, and use max-width to realign the design for smaller screens.

Using CSS breakpoints with SASS

Sass is a style sheet language that helps to make CSS more efficient and maintainable. It runs on top of CSS, adding extra features like variables, mixins, and nested rules. We can write SASS in two syntaxes: SCSS and SASS. 

Sass files typically have a .scss or .sass extension, and they are compiled into CSS files used in web browsers. Although Sass adds some powerful features to CSS, it is still compatible with existing CSS code. This makes it easy to use Sass alongside existing style sheets, making it an increasingly popular choice for web developers.

The Sass language supports all the CSS at-rules. Sass has common support for almost all at-rules by default in order to remain flexible and forward-compatible with future versions of CSS.

A CSS at-rule is created as –  @<name> <value>, @<name> { … }, or @<name> <value> { … }.

The CSS at-rule and CSS style rule switch places when they nest, with the style rule being inside and the at-rule at the top level of the CSS output. This allows conditional styling to be added without requiring a change to the style rule’s selector.

Here is an example of how the Sass is processed and compiled into CSS output. Once you install Sass, you can compile your instructions to CSS with the help of the sass commands. For example, you can work on your preprocessed Sass file with the help of input.scss command and then compile it to a CSS output file with the output.css command.

@media

The @media rule accomplishes all of this and more. It supports SassScript expressions straight in the feature query, along with interpolation.

To make it simpler to assist browsers that don’t yet natively aid nested @media rules, Sass will attempt to merge media queries that are nested inside one another.

@supports

The @supports rule additionally permits the use of SassScript expressions in the declaring queries.

@keyframes

Like a general at-rule, an @keyframe rule must have only keyframe rules as child rules, not normal selectors such as percent, from, or to.

Which CSS Breakpoints to Use?

Although every device demands separate CSS breakpoints depending upon their screen resolution, it is not necessary to use CSS breakpoints media queries for individual device width. It is impossible to add CSS breakpoints to every new device as more and more are released. Instead, make an effort to select breakpoints based on web design and audience usage patterns for target devices in the target markets.

For devices with varying screen sizes, there are a few common breakpoints –

• For Mobile Devices – 320px — 480px
• iPads and Tablets – 481px — 768px
• Laptops and small screen – 769px — 1024px
• Large screens and Desktops – 1025px — 1200px
• TV and Extra Large Screens – 1201px and more

You can create a manageable and simplified responsive website using the CSS breakpoints mentioned above.

CSS Breakpoints: Best Practices for a Responsive Web Design

• To speed up page load times, use minified HTML, CSS, and JavaScript, including commas, deleting spaces and other redundant elements.
• Compared to larger screens, designing for a tiny screen (such as a mobile device) is more difficult (desktops). Therefore, it is preferable to establish the priorities as soon as possible!
• Compared to its desktop counterpart, a website’s mobile version can be made simpler and more easily. When creating a design, keep a mobile version of the website in mind. Prior to adding any new features for the desktop view,  first, handle the most crucial things.
• Since the block-level characters such as divs, headings, and sections will automatically expand to 100%, the amount of implementation is greatly reduced. As a result, most of the material will automatically resize to fit the mobile view of the website.
• According to the type and form factor of the mobile device, it is important to prioritize the functions. For instance, voice instructions can be given priority over keyboard/touchpad requests.

Media Query Breakpoints to Use

The process of building a website is simplified when you know what CSS media breakpoints to use. In terms of popular devices and content types, there are several CSS media breakpoints that will likely work for most websites. 

Let’s start with some popular frameworks like Foundation, Bootstrap, and Bulma.

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

Mobile-first design is a best practice currently considered the industry standard with these frameworks. Therefore, employing these breakpoints will result in higher degrees of responsiveness for websites. The following are some examples of breakpoints that you could use or you could come up with your own –

In addition, determine media query breakpoints based on the most commonly used resolutions across mobile, desktop, and tablet devices. Here are a few examples –

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

Summing Up

Clearly, defining and implementing CSS breakpoints for responsive design and media queries across all platforms is impossible. The best choice is to use CSS media queries and breakpoints that correspond to the target audience’s preferred device types. In order to achieve more over the long run with realistic amounts of work, it would also be beneficial to keep the material flexible and adaptive to change.

Correctly setting CSS responsive breakpoints requires a lot of time and work. Therefore, it is crucial to undertake responsive testing of websites after installing CSS media query breakpoints to see how your website appears and functions across multiple screen sizes. 

Testsigma is an open-source, independent test automation platform prepared to meet your needs. You don’t need to spend time on setup, integration, or programming since free maintenance testing and limitless flexibility allow you to construct reliable automated tests.

Frequently asked questions:

What breakpoints should I use in 2022?

Some common CSS breakpoints in 2022 that you can use include –

• Mobile – 360 x 640; 375 x 667; 360 x 720
• Tablet – 768 x 1024
• iPhone – 375 x 812
• Laptop – 1366 x 768
• Desktop or high-resolution laptop – 1920 x 1080

What are common breakpoints?

With a lot of CSS screen sizes in the market, there are no fixed breakpoints present that can be used on all devices. Therefore, it cant be said that there is a standard resolution. However, there are a few breakpoints that are commonly used in daily programming. Some common CSS breakpoints are –

• Mobile devices – 320px — 480px
• iPads, Tablets – 481px — 768px
• Small screens, laptops – 769px — 1024px
• Desktops, large screens – 1025px — 1200px
• Extra large screens, TV – 1201px, and more

How many breakpoints do you need?

Although no industry standards or subsets of breakpoints apply to all devices, you should use at least three breakpoints to give your device the most flexibility. Make sure you consider your existing content when designing for certain breakpoints. 

What is a breakpoint range?

Common breakpoints are based on the width of the browser window, typically ranging from 320px to 1024px. However, breakpoints can also be based on the browser window’s height, the device’s orientation, or the screen’s resolution. In addition, breakpoints can be customized to suit the specific needs of a web page.