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?

closed as primarily opinion-based by JohnGB Apr 24 '16 at 23:06

Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. If this question can be reworded to fit the rules in the help center, please edit the question.


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.