Nx300px, a 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.

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.