What is a media-query?

A Media Query is a CSS Technique that uses a @media and @import at-rules which helps in invoking CSS properties inside a block only if the desired condition is true for various device resolutions.

Ex:

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

Adding breakpoints..

Breakpoints help in eliminating clutter of rows and columns made in a web page. It was responsive but it wasn't made for a smaller screen with a lower resolution like Mobile Phones, Tablets, etc.

Ex:

@media (max-width: 768px) { 
  html {
   color: gray;
   font-size: 1rem;
  }
}

Improving the compatibility with outdated or older browsers

Certain browsers don't support media queries and the applied media features like styling does not get implemented. The example being displayed below has no effects on modern browsers.

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