Breakpoints can be improved

[mayank99]

Currently, the breakpoints are handled like this:

@media (max-width: 486px) { ... } // mobile
@media (min-width: 487px) and (max-width: 768px) { ... } // landscape-mobile
@media (min-width: 769px) and (max-width: 991px) { ... } // tablet
@media (min-width: 992px) and (max-width: 1399px) { ... } // small-monitor
@media (min-width: 1400px) { ... } // monitor

This approach has a few problems:

1. It is neither mobile-first nor desktop-first. Breakpoints should typically only travel in one direction (pick one of the ends as a default, and then use only min-width or only max-width. There are very limited uses for specifying both constraints.
2. It doesn't account for fractional widths (e.g. 486.5px will match neither mobile nor landscape-mobile) which are sometimes possible, especially with iframes.
3. The breakpoints should be converted from pixels to rems for better accessibility.
4. The values picked for each breakpoint don't exactly match up with the real screen resolutions; I'm not sure why those random values were chosen. I took some time to map out global screen resolution stats according to widths and found that 500px, 1100px and 1500px work great as breakpoint values. This will still not account for the many permutations within these sizes, e.g. changed font size, resized window, multi-window on android/ipad. And that's fine, it is still a much more methodic approach based on real data rather than picking random values from other projects (which might in turn be based on random values picked by yet other projects).

Further reading: https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/

[gretanausedaite]

Breakpoints were chosen based on this article: https://polypane.app/blog/css-breakpoints-used-by-popular-css-frameworks/ (not random)

[bentleyvk]

Also, breakpoints were chosen based on the same article that you gave here, that says not to take some specific resolution.

[mayank99]

Breakpoints were chosen based on this article: polypane.app/blog/css-breakpoints-used-by-popular-css-frameworks (not random)

Those are random though. We don't know how those frameworks came up with those values, and they might have copied even other frameworks.

Also, breakpoints were chosen based on the same article that you gave here, that says not to take some specific resolution.

Then how did we arrive at values like 769 and 991? Those are currently the bounds of tablet breakpoint and they will not match 768x1024 and 1024x1366, both of which are tablets. I think there are also some smaller tablets with resolutions like 601x962.

---

Even if you insist on keeping the same breakpoint values, the other three points I mentioned still apply.