Is this the best way to do Media Queries?

1

I want to have a responsive site, and that’s the solution I come up with.

  @media only screen and (min-width: 0px){
    body{
      background-color: lightgray;
    }
  }
  @media only screen and (min-width: 600px){
    body{
      background-color: lightblue;
    }
  }
  @media only screen and (min-width: 1200px){
    body{
      background-color: lightgreen;
    }
  }

It’s the best solution ever, isn’t it?

Using something like " width >= 600px" only works in Firefox and not Chrome and Opera. It’s unbelievable this way of writing is not a standard in all browsers: it’s easier to understand.

2

There is no one right way to do media breakpoints. They should be based on your content. Start with your browser as narrow as possible and style. That will be your base CSS. Then slowly widen your browser until you find a good spot where you think it makes sense to rearrange the elements on your page for a wider view port. Make that your break point and style accordingly.

If you really want to be responsive not just to width but also to text size then use ‘em’ for your breakpoints instead of ‘px’.

2 Likes
3

When you say narrow as possible do you mean as narrow at the smallest device goes in dev tools ?

4

Don’t worry about the smallest possible device size. Just using your plain old desktop browser, make it as narrow as possible. My Firefox narrows to about 440px. That’s pretty dang narrow. Yes, some of the phones are a little narrower, but at that width it doesn’t really make a difference. Your styling is going to be the same whether the width is 375, 414, or 440.

1 Like
5

Okay good point. Thank you bbsmooth. I understand what you mean now. Just open it in Live Server and make your browser smaller and that will account for all the smaller mobile devices.