is 320px breakpoint standard in 2022

[wb_user]

is 320px breakpoint size standard design for mobile in 2022?

[Pablo]

I personally think 480 is a better choice for the smaller breakpoint, because there are not many devices than are 320 pixels.

[wwonderfull]

320px goes back to iPhone 5 screen dimensions or classic Nokia phones with buttons. Those had 320 or less screen dimensions. So, 320-480 any thing in between is and always should be the standard breakpoint for mobile devices.

[wb_user]

thanks friends, are you suggest I use 480px breakpoint Instead of 320px?
of curse I can make 480px breakpoint and keep 320px too!
in this case I will have 1280px, 720px, 480px and 320px
but if this is extra work, I will create only 1280px, 720px, 480px.
what do you think?

[wwonderfull]

When I make websites I hardly use a breakpoint as the grids do it perfectly. So, the page does not have to have any seprate breakpoints unless I really want a specific object to be rearranged or re-order or vanish in mobile devices. There is so many devices out there it is more like a hassle to put so many breakpoints. Instead take an average break point for mobile which is 480 then an average for tablets which is 768 then then we have desktop which doesnt even need a breakpoint.

But anything out of the ordinary might take some extra adjustments depending on device and responsiveness which totally depends in certain situation that just shows the reason why we have breaks to show the point why we are breaking it.

[crispy68]

Personally, I think you want to start with 360px as worldwide it is currently the most common size and you will cover many mobile devices. For example, my Samsung Galaxy S20 note is 384px. If you started at 480px then your screen would be too big for mine.

You can check out more stats here:
https://www.hobo-web.co.uk/best-screen-size/
https://gs.statcounter.com/screen-resolution-stats

You can also view common viewport sizes here of different devices:
https://viewportsizer.com/devices/
https://screensiz.es/
https://viewportsizes.com/

If you create a floating layout using grids, flex containers, flexgrid, it will make it easier to use less breakpoints and will be more responsive for more sizes. Breakpoints are used for when your design "breaks" and you need to reposition/change the layout at that point. Don't be afraid to use breakpoints but only use them when needed. Make sure to test your site and different widths to make sure everything looks good.

[zinc]

I also use 414px as well in my designs.

[wb_user]

thanks guys I change my new website design to breakpoint + layout grid

[dnlyko]

I only use Breakpoints as I want the page to display exactly as I designed the layout to be viewed.

1800 for 1920x1080
1200 for 1366x768 & 1280x720
1024 for tablet landscape
768 for tablet portrait
360 for mobile devices

[brynj]

Welll ...... thanks guys, that's cleared it up haha