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
{
...
}
For Samsung Galaxy S9+
{
...
}
Instead of specifying breakpoints of each device separately you can also define breakpoints for common device groups.
@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.
{
...
}
For screen resolution between 480px and 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.
