Height is irrelevant.
I like to use Zurb Foundation for responsiveness. It's much less "CSS-heavy" than other packages I've seen, such as Bootstrap. Foundation only offers the responsive grid and a few CSS stylings, rather than every pixel being styled (like Bootstrap).
Foundation uses 40em (min) and 64em (min) widths. On very rare occasions I'll set a third break point for 78em (min) for very large screens. But it's exceptionally rare that the 64em width fails to suffice.
If setting my own media queries in pixels, I typically use 3 breakpoints..
- 420px max
- 768px max
- 1200px max
Are these "correct"? Well, to each his own. They work very well for my projects.
They may not for your projects. I don't really create a lot of full-blow web sites. I will on occasion. However, I mostly create a great many "landing pages", 3-page "squeeze" sites, or responsive emails.
My personal opinion is that you rarely want to go over 1200px. Because even if someone has a 2560px wide monitor they most probably are not displaying web pages at full screen. I know I never do. For my work, anything which needs to appear wider than 1200px is set to a 100% width and generally it's a background image or a color field. I actually am annoyed by websites that force a 1400px or wider display on a desktop. I find it kind of short-sighted to think that merely because a screen can display something wider, it's not very user-friendly to assume they are displaying pages at full screen widths on a (huge) desktop.
-- Not stating any of this is "how it has to be done" -- it's merely what works for me.
max-width
and handle breakpoints by reducing the viewport width and adding a breakpoint + adjusting css where needed. I've found this to work the best for me. If I'm lucky I may only need 1 breakpoint for mobile. – Joonas Jan 24 '19 at 11:17