Nx300px, a breakpoint system

The simplest system for screen size breakpoints in responsive design, my Nx300px breakpoint system.

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.


Or more detailed:


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.