Have you ever wondered how a web page adjusts itself on different screen sizes and why it looks a bit different on different web pages, so let me tell you all these don't take place automatically, properties are set by the developers how a web page will look on different screen sizes and it is done with the help of media query.

Media query is used in CSS using the @media keyword -:

Syntax -:

@media (width: value)

{

style

}

whatever we will write inside the width the style will be applicable to that width we can set style even for a range of widths...

Use of media query-:

Makes the web page responsive

Increases the user interface and experience

Makes a website more portable and easy to use and hence increases the traffic on a website.

Thanks...