What is a media query? What are they used for?

CSSJunior~1 min read

A media query is a condition in CSS that lets you apply different styles depending on the device's characteristics (screen width, orientation, resolution, etc.).

Used for:

Responsive design (changing the layout for mobile, tablets, desktops)
Targeting specific devices (for example, only print or only screen)
Switching styles when conditions change (orientation portrait/landscape, high pixel density, different window sizes)

A basic example for responsiveness:

css

@media (max-width: 768px) {
  .container {
    font-size: 14px;
  }
}

This code will apply only if the screen width is ≤ 768px.

In summary: media queries let you change the appearance of a site for different devices and conditions, the foundation of responsive design.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.