In a browser based app with responsive design, how many breakpoints are needed? Have you done any projects as an example, and what are the best industry practices?

I normally see only 3 breakpoints; smallest mobile devices at 320px, iPad at 768px and another one at 1200px for desktop.

Secondly, for a native app, how many versions of mobile screen size are needed?


Bootstrap, a very popular framework, uses 4 breakpoints, as below:

/* Extra small devices (phones, less than 768px) / / No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }

Not the answer you're looking for? Browse other questions tagged or ask your own question.