Nice overview, though I would advice against using device-specific breakpoints even beyond giving them device-specific names. Phones continue to get larger every year so designs made for 320px specifically started to become unoptimized when phones became 375px wide, and those in turn started becoming unoptimized when 414px became the norm, then iPhone 14 came out at 428px wide and that'll just continue.
The best strategy then is to let your site's content and layout guide where your CSS breakpoint should be, and designing for the _range_ between them.
The best strategy then is to let your site's content and layout guide where your CSS breakpoint should be, and designing for the _range_ between them.
If you want a full overview of CSS Media queries, I maintain an evergreen article with everything there is to know: https://polypane.app/blog/the-complete-guide-to-css-media-qu...