5

Recommendation for mobile css queries?

I want to use one or two queries. Not more. And I find lists of way too many.

Is there a guide that covers like.. two? Two additional widths you should design? How do you do responsive webdesign?

Comments
  • 1
    @norman70688 I know. Still I seek one or two general phone media queries for my design. Not 20 or 50.
  • 2
    When I first first FIRST learned how to do html and css, it was recommended to play with the size of the window while your site is up, when It begins to look retarded or weird: Breakpoint.

    Now I just use bootstrap to take care of overall responsive, then i do media queries on whatever fell through the cracks
  • 2
    There is no perfect solution. It really does depend on your layout. First thing you do should is limit your design in both directions. For example min width of 300px and max width of 1400px (or whatever you like). Then start mobile first or desktop first, scale up or down and whenever something breaks add a media query. This might sound tedious but if you use can use grid or at least flexbox it really isnt that bad at all. Also use rems / % and vh/vw for most things. This will make your layout much more flexible without media queries. Im not a fan of predefined breakpoints which might not fit your design. And also: you dont have to do mobile first. Both works just fine.
  • 2
    >700px in most cases are mobile phones. Sometimes you should have a look at <400px or <500px and maybe <900px or <1000px
  • 1
    @musician Thanks a lot! Really helpful comment. I had a fully scaleable everything vw/vh/vmin/vmax page a while ago. Has its perks but px/em designs aren't bad as well.
Add Comment