Reading media rules from the stylesheet
Each @media block is a CSSMediaRule in the CSS Object Model, holding its own list of rules. DevTools shows the same structure in the Styles pane, with the query written above the rules it controls.
A media query wraps rules in a condition about the device, such as @media (min-width: 40rem) { ... }, so they apply only when it's true; you can test width ranges with min-/max- or the newer range syntax, test orientation, and combine tests with and, commas and not.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make .sidebar hidden on screens narrower than 48rem and shown as a 16rem-wide column on wider screens, mobile first, with range syntax.
Write one media query that applies when the screen is in landscape and at most 500px tall (a phone on its side), and reduce the header's padding there.
In JavaScript, log "wide" or "narrow" now, and again every time the viewport crosses 48rem.
Explain it without notes
What is a media query, and what happens to the rules inside it?
Explain min-width vs max-width and why mobile-first code mostly uses min-width.
What problem does the range syntax solve?
How do you combine media queries with "and", "or" and "not"?
Why can a rule inside a matching media query still lose?
Preview
Console
Nothing logged yet.Expected console output
@media screen and (min-width: 600px) | rules inside: 1
@media (600px <= width < 900px) | rules inside: 1
@media (orientation: landscape), print | rules inside: 1