HTML full responsive tips

Well, I'm applying responsiveness to my little projects for learning purposes.

I've looked at some websites like: w3schools-mediaquery

I've found interesting things, but I'd like to know how to handle the various resolutions and which medium is most recommended for a full responsive website.

I currently have something like:

@media only screen and (min-width: 600px) {}
@media only screen and (min-width: 1200px) {}

basically to begin with a simple adaptation, without much work, I was thinking of starting with:

@media only screen and (min-width: 600px) {}
@media only screen and (min-width: 650px) {}
@media only screen and (min-width: 700px) {}

Would coding an interface every 50px be useful? 10 to 10, 20 to 20, 50 to 50 which would be the most recommended? or is there another more useful way to do this?

I would like to do everything manually, bootstrap is a distant alternative.

Some examples, recommendations, and corrections are welcome!

Thanks for your attention.

1 answer

  • answered 2018-11-08 00:16 Ron Royston

    I use a single breakpoint, basically I'm detecting phones only. As far as overall layout, I'm using CSS Grid as it is most capable. I find that several breakpoints is unrealistic to maintain and so I no longer consider tablet views. It's either a phone view or not a phone view.

    @media screen and (max-width: 767px) {
    
    }
    @media screen and (min-width: 768px) {
    
    }