CSS Media Queries

Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

If the browser window is 600px or smaller, the background color will be lightblue:

Resize the browser window. When the width of this document is 600px or less, the background-color is "lightblue", otherwise it is "pink".

Example

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}