What are CSS and media query breakpoints?
Every website is accessed via devices with different screen sizes and resolutions. The software has to render perfectly across each screen size. Content or images cannot be distorted, cut out, or obscured.
To allow this, developers have to use CSS breakpoints, also called media query breakpoints. These are points defined in the code. Website content responds to these points and adjusts itself to the screen size to display the accurate layout.
Check website responsiveness on a free Responsive Design Checker.
Are you accurately Defining Breakpoints in Responsive Web Design?
How to set CSS breakpoints
1. Breakpoints based on device
With the current state of device fragmentation, determining breakpoints based on device can be challenging. 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.
Read More: Mobile First Design: What It Is and How to Implement It
2. Breakpoints based on content
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.
A good rule to follow in this regard is to add a breakpoint when the content looks misaligned.
The Breakpoints to be Used
- 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.
- Secondly, use breakpoints for the most commonly used device resolutions used across mobile, desktop and tablet.
Read More: What is the ideal screen size for responsive design?
Obviously, identifying and using responsive 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.
