Retour au cours

Lesson 82: Understanding Media Queries (Syntax and Structure)

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

82. Understanding Media Queries (Syntax and Structure)

Media queries are conditional statements in CSS that let you apply a set of styles only if certain criteria (e.g., viewport width, device type, color scheme) are true.

Basic Syntax

A media query starts with @media followed by the media type and one or more conditions (media features) enclosed in parentheses.

css /* Media Query Structure / @media and () { / CSS rulesets inside here apply ONLY when the condition is met */ }

1. Media Type

  • screen (most common, for computers, tablets, phones)
  • print (for optimizing pages for printing)
  • all (applies to all devices)

2. Media Feature (Condition)

We usually focus on the screen width using min-width or max-width.

css /* Example: Styles apply only if the screen width is 600px or less */ @media screen and (max-width: 600px) { body { background-color: lightblue; } h1 { font-size: 1.5rem; } }

Shorthand: When the media type is all or screen, you can omit it:

css @media (max-width: 600px) { /* Styles here */ }