the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862, also checked two other threads on this

Posted in: #PageLayout #ResponsiveDesign

Having questions about this approach: medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862, also checked two other threads on this forum: What are best practices for determining responsive design breakpoints? and Is there a standard width for designing web page mockups?

As far as I get it, one should design a:

600px breakpoint so devs know how to address phone devices
900px breakpoint so devs know how to address tablet portraits from 600px to 900px
1200px breakpoint so devs know how to address tablet landscape from 900px to 1200px
and now what? 1800px? How would devs know how to e.g. compress some tables on 1280 if they don’t fit and one column should be removed on small resolutions? Or how would they know there’s a change in some element that now works with hover effect (since tablets don’t accept hovers)?

Should 1800px breakpoint tell them how the website/app should look like on all laptop and desktop devices? If so, from our experience it’s almost impossible to include every of that information in just one big breakpoint. And as You know, it’s easier to show something than to make notes when You want to eliminate misunderstanding.

Some of You will say - "mobile first then scale up" but in real world noone presents 380px layout in front of client. Some will say - "everything runs on % so it will scale up" but it's also almost impossible to calculate the proportions of every whitespace so well they will perfectly scale up.

10% popularity Vote Up Vote Down