What Are the Right Breakpoints for Media Queries?

What is the maximum number of breakpoints? What are the common CSS media queries breakpoints? What is the minimum total of breakpoints?

By Hanno Zhuan

You might finish reading in 1 minute

There are no specific numbers. There are no specific amounts. Right breakpoints are breakpoints that make your website work well on all screen sizes.

Sometimes, a zero breakpoint works well because the website uses modern Cascading Style Sheets (CSS) such as CSS Grid and Flexbox. It uses fluid space and fluid typography with the clamp(). It also has a simple layout. Thus, no breakpoint is needed.

I prefer having no breakpoint at all. But if I need to adjust something, I will add a breakpoint. I am not an anti-media-query web developer. I prefer simplicity, and that is all. We can make a website without a breakpoint. Challenge yourself. You will see that you need to be smart to develop a website. When you succeed, you can be proud of it.