How can we use media queries to make a page responsive (core RWD concept 3)?

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.

@media type and (feature: value) {
	/* Styles for browsers that meet this criteria */
}

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

‼️

If we are designing for screen, the media type is optional: @media (feature: value) { /* Styles for browsers that meet this criteria */ }