html

Breakpoints in CSS Media Queries | Explained

CSS media queries are referred to as queries that allow you to change the appearance of the web structure depending on the type of device using the website such as desktops, phones, laptops, etc, and prove useful in designing responsive websites. These queries are specified using the @media rule and should be defined at certain points where the modification in the web layout is required. These points are called breakpoints which we have discussed in detail below.

Introduction to CSS Breakpoints

Breakpoints in CSS are referred to as those points on which the layout of a website alters corresponding to the screen size of the device type. These points are also regarded as Media Query Breakpoints because these are specified in media queries.

Now that we have learned what media query breakpoints are, let’s explore how to set them.

Setting CSS Breakpoints

There is no standard provided to set a breakpoint, therefore, breakpoints defined in various web structures might differ. However, we have been provided with two types of approaches to set a breakpoint.

1. Device-Type Breakpoints

2. Content-Type Breakpoints

Let’s see them in detail.

Device-Type Breakpoints

As the name suggests, device type breakpoints regard to the procedure of specifying breakpoints based on different device types. Although, this might not be considered as a good approach because technology is evolving by the minute and new devices emerge every now and then. Therefore, every time a new device emerges the developers need to specify a breakpoint for that particular device which can be hectic.

Moreover, the list of media queries is huge when defining breakpoints according to device type. Different devices on the basis of which you can decide breakpoints are as follows.

1. Desktops

2. Tablets

3. Mobile phones

Here we have presented some examples of device-based breakpoints.

For iPhone 13

@media only screen and (device-width:1170px) and (device-height:2532px)

{

  ...

}

For Samsung Galaxy S9+

@media only screen and (device-width: 1440px) and (device-height: 2960px)

{

...

}

Instead of specifying breakpoints of each device separately you can also define breakpoints for common device groups.

/* For very small devices (486px and below) */

@media only screen and (max-width: 486px) {...}

/* For small devices (596px and up) */

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

/* For medium devices (720px and up) */

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

/* For large devices (995px and up) */

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

/* For extra large devices (1100px and up) */

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

Content-Type Breakpoints

Specifying breakpoints based on the type of content that your website displays, the content type breakpoints are used. This is considered to be a good approach because this approach requires you to specify breakpoints only at those points where the content needs any sort of readjustments. Using this approach the number of media queries becomes less and more manageable.

Some sample content type breakpoints are provided below.

For screen-width 720px and wider.

@media only screen and (min-width: 720px)

{

...

}

For screen resolution between 480px and 720px.

@media only screen and (min-width: 480px) and (max-width: 720px)

{

...

}

Using min and max-width breakpoints at right places

In the above examples, you must have noticed that we have used two types of breakpoints which are min-width, and max-width. A question must arise in your mind which one to use when.

The answer to this question is simple: if you are developing your website for smaller devices first then set your default CSS breakpoints with min-width and adjust for larger devices accordingly. Meanwhile, the opposite is the case for larger devices. If you are developing for larger devices first then use max-width and then tune for smaller devices accordingly.

Types of breakpoints used

When the device type market was not as huge as it is now then the screen width for every device was specified separately, however, this approach is not recommended now as there is a vast range of device types in the market.

The approach that is preferred is that you should be aware of the type of your web design, your target audience, and the type of devices your audience mostly uses and the screen width of those devices. Here we have enlisted some frequent breakpoints used.

1. For mobile devices: 320px to 480px

2. For tablets and ipads: 481px to 768px

3. For laptops: 769px to 1024px

4. For desktops: 1025px to 1200px

Conclusion

Breakpoints in CSS are referred to as those points on which the layout of a website alters corresponding to the screen size of the device type. There are two types of breakpoints, one that are specified on the basis of the device type and the other are defined on the basis of content type. The approach using the content type is preferred over the device type as there is a huge range of devices available in the market and it becomes difficult to specify breakpoints for each device individually. Although, there are certain common breakpoints used for various devices which we have discussed in detail in this write-up along with other details regarding breakpoints.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.