Media Query

 

What is a Media Query?

• Media query is used to make the webpage capable of the device.
• Mainly it is used to make responsive web designs.
• With media queries, we can set the different styles based on the different screen sizes.

Media Query Syntax

@media screen and (min-width: 480px) {

    body {

      background-color: lightgreen;

    }

  }

• In the given syntax example we have set the min-width and max-width to add style on the given screen size.
• CSS selector is used to select the HTML element and we will write our CSS properties in { }

Media Query Screen Sizes

• Phone: 600px
• Tablet: 768px
• Laptop: 992px
• Large: 1200px