Breakpoints Viewports

Gadgetman496

How many Breakpoints/Viewports would a Web Developer use when creating a responsive website from scratch, and, what are the most common sizes used?

Talisman

It depends on the project. I would use Bootstrap breakpoints as a starting guideline and then adapt to the project content for smooth transitions.

The Standard Bootstrap 3.x Breakpoints

@media all and (max-width: 991px) { ... }
@media all and (max-width: 768px) { ... }
@media all and (max-width: 480px) { ... }

The Standard Bootstrap 4.x Breakpoints

@media all and (max-width: 1199px) { ... } 
@media all and (max-width: 991px) { ... } 
@media all and (max-width: 768px) { ... } 
@media all and (max-width: 575px) { ... }

Gadgetman496

So would the 3 x Breakpoints cover Desktop, Tablet & Mobile.

Whereas the 4 x Breakpoints would cover Desktop, Laptop, Tablet & Mobile, or, is that the basic idea at all?

Talisman

You need a minimum of 3 breakpoints -  one for each type of device (mobile, tablet, and desktop).

If you know the market for which the site is being developed you can use publicised data to help you decide what breakpoints to target.

Screen Resolution Stats Ireland

Once you have the website live you can use analytics to track the devices visiting it and alter your breakpoints to improve the experience for the most common screen sizes. How deep into the rabbit hole you wish to go is entirely up to you.

Gadgetman496

That's a handy link, cheers Talisman