300px*N breakpoint system

The simplest system for screen size breakpoints in responsive design, my 300px*N breakpoint system.

Post meta:

Which breakpoints should we define? How many? What naming convention? How to share them across multiple apps in a future-proof way?

Keep on dreaming!

“Is this a dream?”

The 300px times N breakpoint system!

The simplest and most versatile way to define responsive design breakpoints ever created. All developers will remember them.

None, 900px, 1200px, 1500px: Phone, tablet, laptop, desktop.

Or more detailed.

None, 300px, 600px, 900px, 1200px, 1500px, 1800px: Wearable, phone, landscape, tablet, laptop, desktop, pro.

With 300px times N, you can even come up with similar systems for min-height!

You’re welcome