Media query is css technique that is being introduce in css3.

It is used to set the css and display the page properly when seen on the different screen size.

It uses $media rule to include a block of the css only if a certain condidtion is true.

ex

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

It is basically used to make the page responsive.

We can use multiple breakpoint for the responsive page.

We can also set the range for the media query

@media only screen and (max-width: 500px) && (min-width: 400px) {
    body {
        background-color: lightblue;

We can add as many breakpoint for the different screen size such as mobile tab desktop

Media queries are used to change layout of a page that depend on the orientation of the browser.

We can also have a set of css properties that will only apply when the browser window is wider than its height that also called landscape orientation.