A media query in CSS is a technique used to apply different styles based on the device’s screen size, resolution, orientation, or other properties. It helps in making websites responsive, ensuring they look good on all devices (mobile, tablet, desktop).

Syntax:

@media (condition) {
  /* CSS rules */
}

Common Media Query Conditions:

1.Mobile Screen:

@media(max-width:767px)
{
 body{
  background-color: red;
 }
}

2.Tablet Screen:

@media(min-width:768px and max-width:991px)
{
 background-color: green;
}

3.Medium Screen(Laptop)

@media(min-width:992px and max-width:1199px)
{
 body{
  background-color: blue;
 }
}

4.Min-width Screen (Desktop)

@media(min-width:1200px)
{
 body{
   background-color: yellow;
 }
}

5.Orientation-based (Portrait or Landscape)

@media (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}