Media Query ~ DevJunctionPoint

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

DevJunctionPoint