Most frontend developers will ponder these questions more than once:
Which breakpoints should we define? How many should we define? What naming convention should we use? How can we share them across multiple apps in a way that remains future-proof?
The Nx300px breakpoint system! The simplest and most versatile way to define responsive design breakpoints ever created. All developers will remember them.
| Phone | Tablet | Laptop | Desktop |
|---|---|---|---|
| - | 900px | 1200px | 1500px |
Or more detailed:
| Wearable | Phone | Landscape | Tablet | Laptop | Desktop | Pro |
|---|---|---|---|---|---|---|
| - | 300px | 600px | 900px | 1200px | 1500px | 1800px |
With Nx300px you can even come up with similar systems for min-height!
You’re welcome!
Update 2023-04-27: …aaand I was just made aware that David Gilbertson thought of similar breakpoints in 2016 as The 100% correct way to do CSS breakpoints.
Update 2024-09-26: Inspired by Josh Comeau also using rem for CSS media queries (I think the benefits of using em and rem for font-sizes has been covered many times), I want a similarly simple breakpoint system using rem. Although opposite media queries perhaps becomes more weird? Like the example below, where I want the “title” to have a smaller font-size from tablet size of 900px and down, but from tablet and up I want to keep the font-size it happens to have from anywhere else. I need to use the width just below without too much hassle:
@media (max-width: 899.9px) {
.cover-section .title {
font-size: 1em;
font-weight: bold;
}
}
Let’s say tablet was from 50rem, then it would be:
@media (max-width: 49.99rem) {
/* ... */
}
Perhaps they’re both weird, but I will stick with Nx300px for now.