I’m on the hunt for some standard breakpoints and screen resolutions to use as a guide. I want to ensure that my app looks great and functions smoothly across various devices and screen sizes.
Could anyone point me in the right direction or share some commonly used breakpoints and resolutions that are considered best practices in the industry?
common breakpoints do not exist in my opinion as each page, each element likely require their own set of break points as it depends on the design of the page and elements in use.
As a general rule of thumb, I build with 360 in mind as smallest mobile device currently sold (used to be 320 but less than 4-5% of mobile devices globally in use are of this size)…but when thinking about 360 I want some space on sides, so it is easiest for me to use 320 as a block size, which will double, then triple, then quadruple
320/640/960/1280
When thinking of common device sizes… 1020px is the smallest desktop, so for me, is the width that I use as a point of 1020 or more is desktop (or laptop, I don’t differentiate)…then for tablet, I use 760px and for mobile I use 440px.
You can find standard device sizes and come up with your own ideas as well
Thank you for sharing
This topic was automatically closed after 70 days. New replies are no longer allowed.
