lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroCssChapter5Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter3Title

webIntroCssChapter4Title

# Media Query

`Media Query` is used to apply styles to a web page depending on the screen sizes of different devices like smartphones, tablets, and PCs, to display the optimal layout and design.

<br />

## Basic Structure

Media Query begins with `@media` followed by the conditions.

The styles for the matching condition are enclosed within curly braces `{ }`.

<br />

## Example:

```css title="CSS"
/* Styles for screens less than 600px wide */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue; /* Set the background color to light blue */
  }
}
```

In this example, when the screen width is less than 600px, the background color of the `body` is set to `lightblue`.

Media Query is a method to apply styles based on conditions such as screen size, to provide optimal web design on various devices including smartphones, tablets, and PCs. This can enhance user experience.

### Media Query is used to adjust the style of a web page according to the screen size.