Media Query

Media query is the main part of CSS. Media queries are used to make the website responsive. We can use max-width and min-width for making our website responsive. Responsive means how websites will look on different sizes of devices. Media query helps us to make a website that runs equally efficiently on a mobile, laptop, tablet, or a big-screen computer. Media queries are case-insensitive. Media queries can be used to check many things, such as -

• width and height of the viewport and device,

• orientation means landscape or portrait mode.

• resolution

Basic syntax of media query in CSS -

@media  (min-width: 460px) {
  .container {
    /*  styles go here */
  }
}


//when the browser width is at least 600px and above
@media screen and (min-width: 600px) {
  .container {
    /*  styles go here */
  }
}

Media type - It specifies to the category of media for the device. The different media types include all, print, screen.

• all - It works for all devices

• print - It is used for printer

• screen - It works for devices with screens like smartphones and computers.

There are many features of media queries such as width, height, color, grid, max-resolution, aspect-ratio, etc.

Two conditions are given below in the parenthesis. It means, it will work if the minimum size of the browser is 375px and the maximum is 600px. ``` media only screen and (min-width: 375px) and (max-width: 600px) { body { background-color: red; } }