What are good CSS Breakpoint Values for Responsive Design?

What are good CSS Breakpoint Values for Responsive Design?

CSS breakpoints are points at which the website content responds to device width, allowing you to show the user the best possible layout. CSS breakpoints are also known as media query breakpoints due to their use with @media queries.

My experience with breakpoints values

I noticed that I was using some pretty random values for my CSS breakpoints while designing a site or project. Sometimes a rounded value, such as 800 or 1200, and other times a specific value up to the pixel, such as 670.

I looked for the best breakpoint values to use in the future. I researched this for some time and came to this conclusion.

We have 6 major device sizes to worry about:

• Mobile portrait
• Mobile landscape
• Tablet portrait
• Tablet landscape
• Laptop
• Desktop

These devices correspond to the following pixel values:

• Small mobiles: < 600px
• Mobile portrait: > 600px
• Mobile landscape: > 600px
• Tablet portrait: > 600px
• Tablet landscape: > 768px
• Large Laptops/desktops : > 992px
• Extra large laptops and desktop: >1200px

I’m not a web designer, so I’m not involved in best practises on a daily basis, but this time I decided to design for mobile first.

Set min-width breakpoints when designing with the mobile-first approach (mentioned above). Smaller device screens should be the default styles. Then, for larger screens, add and adjust.

In the past, I used to design for larger screens, which is what I use the most, and then go smaller, but designing mobile-first and using min-width seems to be the most accepted and used solution nowadays.

How to set breakpoint in CSS?

CSS breakpoints can be added using min-width, max-width, or a combination of the two. It is recommended to use min-width breakpoints when designing the layout with a mobile-first approach in mind. We would set the styles for small screen devices by default and later add and adjust for larger screens.

What is a media query?

In media queries, the @media rule is used to apply different styles to different media types/devices.

Many things can be checked using media queries, including:

• Viewport width and height
• Device orientation (is the tablet/phone in landscape or portrait mode?)
• Resolution
• A popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones is to use media queries.

These are the media queries I will use from now on:

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Clearly, identifying and implementing CSS breakpoints for responsive design and media queries for all devices is impossible. The best option is to use CSS media queries and breakpoints that correspond to the target audience’s device preferences. Furthermore, keeping the content adaptable and changeable would help to accomplish more in the long run with reasonable levels of effort.

Further reading

Want to know how to use media queries? Then check out – Using media queries – CSS: Cascading Style Sheets | MDN

See also

What are the 3 Ways to Style in CSS?
What are the Most Common CSS Units?
What are CSS Rules and Selectors?

If you liked this article, then please share. You can also find me on Twitter for more updates.