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.