Responsive CSS style based on screen width with @media

Using @media in CSS allows you to specify styles for a certain viewpoint (width/height). This helps with creating responsive designs if you’re not using a framework such as Bulma or Bootstrap.

@media has a few parameters of which you can read here the most popular one however is max-width.

With this CSS:

@media only screen and (max-width: 750px) {
  body {
    background: green;
  }
}

When the viewing screen is 750px wide or less the background will be green

@media only screen and (max-width: 750px) {
  body {
    background: green;
  }
}

@media only screen and (max-width: 500px) {
  body {
    background: red;
  }
}

From a screen width of 750px through to 501px the background will be green, once it gets to 500px it will change to red.

Of course you can put any CSS in the @media statement, but background color changing is just to have an easy observation for this post.

The above video is from this CodePen of the @media query showing the max-width parameter.

As the screen gets smaller in width the @media rule comes into effect.