In a perfect world, any design would scale perfectly with any size of container. However, designing every page and every component so generally that it fits to every size is very hard. To keep it simple, we could operate width fixed content widths, maybe with stretching for mobile.
This allows us to use fixed pixel values for components without fear, and we reduce the headaches that come from trying to make everything adaptable.
Example from Vy: Three breakpoints (tablet, desktop, widescreen), used with min-width media queries. This setup promotes mobile-first, as your standard styling will apply to mobile and everything larger, unless overriden by a breakpoint.
In effect, you have a fourth value to keep track of, which is the minimum width we design for. At Vy they use 320px as the absolute minimum content width, which is the same size as iPhone 5/SE. Personally I found that very limiting, so opting for a step larger allows for more complex interfaces, at the cost of things looking weird for people with older phones.
Ultimately, the choice of minimum width should be determined by looking at Google Analytics and figuring out how many people use however old phones.
For choosing which specific breakpoints you could also look at analytics, but there are so many possible phone/tablet sizes, that just going for something and sticking to it has merit.
In a perfect world, any design would scale perfectly with any size of container. However, designing every page and every component so generally that it fits to every size is very hard. To keep it simple, we could operate width fixed content widths, maybe with stretching for mobile.
This allows us to use fixed pixel values for components without fear, and we reduce the headaches that come from trying to make everything adaptable.
Example from Vy: Three breakpoints (tablet, desktop, widescreen), used with min-width media queries. This setup promotes mobile-first, as your standard styling will apply to mobile and everything larger, unless overriden by a breakpoint.
In effect, you have a fourth value to keep track of, which is the minimum width we design for. At Vy they use 320px as the absolute minimum content width, which is the same size as iPhone 5/SE. Personally I found that very limiting, so opting for a step larger allows for more complex interfaces, at the cost of things looking weird for people with older phones.
Ultimately, the choice of minimum width should be determined by looking at Google Analytics and figuring out how many people use however old phones.
For choosing which specific breakpoints you could also look at analytics, but there are so many possible phone/tablet sizes, that just going for something and sticking to it has merit.