RWD Media Queries | CSS3 @media Rule

Responsive Web Design - Media Queries

Media queries are a popular technique for delivering a tailored style sheet to different devices.

To demonstrate a simple example, we can change the background color for different screen sizes.

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

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