Media Query

Media Query is used to provide optimal layouts and designs for web pages according to various screen sizes like smartphones, tablets, and PCs.

A Media Query starts with @media, followed by the conditions.

Styles applicable for those conditions are placed within curly braces { }.

You can specify conditions using and, not, only, min-width, max-width, etc.

• and : Used to combine multiple conditions

• not : Applied when a condition is not met

• only : Applied only in specific browsers

• min-width : Applied when the width is equal to or greater than the specified width

• max-width : Applied when the width is equal to or less than the specified width

For instance, if you want to set the background color to lightblue when the screen width is less than 600px, you can write it as follows:

Copy
/* Style when the screen width is less than 600px */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue; /* Set the background color to lightblue */
  }
}

Or, if you want to set the background color to lightblue when the screen width is between 600px and 1200px, you can write it like this:

Copy
/* Style when the screen width is between 600px and 1200px */
@media screen and (min-width: 600px) and (max-width: 1200px) {
  body {
    background-color: lightblue; /* Set the background color to lightblue */
  }
}

Adjust the width of the Code Execution Result box on the right and see how Media Query is applied.