As part of responsive design, it is important that your layout adapts to the devices on the market, whether they are new or old. However, because screen sizes vary widely across devices, choosing the appropriate breakpoints can be challenging. So how do you determine which breakpoints to use?
As technology evolves, the standards for what is considered a small-screen device versus a large-screen device also change. For 2025, screen sizes are commonly categorized into the following four breakpoints:
| Mobile or Small Device | Range 320px - 480px (480px) | Smartphones, small devices (portrait) |
| Tablet | Range 481px - 768px (768px) | Tablets (portrait), small laptops |
| Small Desktop | Range 769px - 1024px (1024px) | Tablets (landscape), smaller laptops |
| Large Desktop | Range 1025px and up (1366px) | Desktop monitors, larger laptops |
These breakpoints were determined by analyzing both North American and global screen resolution trends for desktops and tablets. By evaluating common screen resolutions, developers can select values that cover the majority of users within each category.
For example, 480px was chosen to support modern larger smartphones while still accommodating smaller phones. Although mobile screen sizes are diverse, the 480px breakpoint covers approximately 50% of mobile devices, helping ensure layouts remain flexible and readable.
Because responsive design aims to create an inclusive experience, developers must also consider factors such as text readability, appropriate touch target sizes for buttons and links, performance and load times, and overall inclusive design principles.
By creating a mobile-first design and adding media queries progressively, you increase the likelihood that Google will rank your site higher, since Google uses mobile-first indexing when evaluating and ranking websites.
You can always add additional breakpoints if your layout does not display properly at certain screen sizes. However, in general, these breakpoint ranges encompass a significant portion of devices currently on the market. It is also important to test your site using browser developer tools and responsive testing tools if you do not have access to physical devices.
Common Mistakes
Some common mistakes include:
- Using too many media queries, which makes CSS difficult to manage
- Applying inconsistent breakpoints across different parts of the site
- Targeting specific devices instead of flexible screen ranges
- Failing to consider screen orientation and resolution differences
Best Practices
Some common best practices include:
- Starting with a mobile-first design to keep layouts simple and avoid unnecessary CSS overrides
- Using flexible units to better adapt to various screen sizes
- Keeping breakpoints consistent and manageable
- Organizing media queries clearly for easier maintenance
- Testing on real devices whenever possible
Website Source 1: causelabs.com
Website Source 2: dev.to
Website Source 3: hennepincounty.gov
Website Source 4: medium.com
Website Source 5: browserstack.com