What does an @media rule do when its media query is true?
Choose an answer, then check it.
Web Development · Foundations
Media Queries
On this page 9 sections
In 30 seconds
A CSS media query A condition that tests characteristics of the media environment for conditional styling. Full entry → asks whether a condition about the current environment is true, then lets the browser use a matching set of styles. Most often, the condition concerns available viewport width, but it can also concern output such as print or a user preference such as reduced motion. Put a query on an @media rule, and the declarations inside are conditional—not a separate language or a command to detect a particular device.
Why this matters
Media queries make one stylesheet adapt its presentation to changing conditions without changing the page's HTML or duplicating a site for every screen size. They also support considerate design: a user preference such as reduced motion can select a calmer presentation. In a course, queries clarify how CSS rules become active and how the cascade resolves rules that do match. In practice, writing conditions around content and layout pressure rather than a list of device names produces CSS that is easier to test and maintain.
The college version
A conditional group of CSS rules
A media query is a boolean test about the media environment. CSS can use that test in an @media at-rule to make a group of rules conditional. In a stylesheet, the familiar pattern is @media (width >= 48rem) { ... }. The declarations inside do not become a new stylesheet and they do not replace the ordinary rules by themselves. Instead, when the condition is true, those declarations participate in the normal cascade alongside any other matching declarations. When it is false, the grouped rules do not apply. That distinction matters when debugging: an apparent failure may be a false condition, an unmatched selector, or a cascade conflict after the condition has matched.
The query can begin with a media type A broad output category in a media query, such as screen or print. Full entry → such as screen or print. It can also test a media feature A characteristic that a media query can test, such as width, orientation, or a user preference. Full entry →: width, orientation, hover, prefers-color-scheme, and prefers-reduced-motion are examples of features with different kinds of values. A query can combine conditions with and, negate one with not, or use a comma-separated list for alternatives. A list such as @media print, (width >= 48rem) matches when either alternative matches. Media queries therefore describe a condition, not a device inventory. A rule based on width means what it says: it tests width; it does not reliably identify a phone, tablet, or laptop.
Width conditions and readable syntax
Width is a common feature because available space can create a genuine layout constraint. CSS supports older prefixed forms such as (min-width: 48rem) and (max-width: 47.999rem). It also supports range syntax Media-query notation that compares a feature with a value, such as width >= 48rem. Full entry →, including (width >= 48rem) and a bounded range such as (30rem <= width < 48rem). The two minimum forms express the same threshold idea: the query matches at 48rem or wider. Exact boundary choices are design decisions, not universal breakpoints. A 48rem condition is not a claim that every device at that size has the same needs; it is a rule a particular layout can test.
Consider a navigation component that is ordinarily a vertical list. If a wider inline space makes a horizontal arrangement legible, a matching query can set its list to a row layout. The base CSS should remain meaningful when no width query matches, and the conditional rule should make one explicit, testable change. This lesson does not prescribe a complete responsive strategy or teach a particular layout system. Its point is narrower: a query selects CSS based on a stated condition. Test the threshold by resizing a browser or using responsive tools, then inspect which rule wins. Avoid overlapping conditions that accidentally give competing declarations the same responsibility; when overlap is intentional, understand the cascade order and specificity that decide the result.
Preferences and non-screen output
Environment conditions are not only measurements. The prefers-reduced-motion media feature reports whether the user has requested reduced non-essential motion. A query such as @media (prefers-reduced-motion: reduce) can shorten or remove decorative transitions and animations. It should not hide information, remove a control's visible state, or make a necessary change impossible to perceive; the goal is to reduce optional motion while preserving meaning and operation. The condition reflects a preference exposed by the user environment, so authors should not treat it as a medical diagnosis or as proof that every visitor needs the same treatment.
Media types make another useful distinction. @media print can apply styles while printing or generating print-oriented output: for example, a site may avoid a decorative background or adjust spacing for paper. A print rule is still CSS governed by the same conditional model. It does not automatically make a document print-accessible, and it does not change the HTML's semantic structure. Likewise, media queries are useful alongside semantic HTML, accessible labels, usable focus indicators, and correctly structured content; they do not repair those foundations. Keep the jobs separate. HTML supplies meaning and structure, ordinary CSS supplies base presentation, and media queries select additional or alternative presentation when a documented environment condition matches. This separation makes each decision easier to inspect and revise.
Eli explains
The same idea, in plain words
Explain it like I’m 10
Think of ordinary CSS as instructions that are always available: make this text this size, put space here, use this color. A media query adds an “if” label to some instructions. It says, “If the page has at least this much room, use these extra rules,” or “If the person asked for less motion, use the quieter version.” The browser checks the condition and includes those rules only when the answer is yes.
The condition is about the current situation, not the name of a gadget. A narrow browser window on a large computer can meet a narrow-width condition, and a wide window on a small device can meet a wide-width condition. That is why it is more useful to name the condition than to guess the visitor’s hardware.
Picture it like this
A media query is like a note on a classroom activity box: “Use these materials only if the class is working outdoors.” The activity is still part of the plan, but its condition decides whether it is used.
Where the picture stops working
A browser does not make a one-time classroom choice. Conditions can change while a page is open, and matched CSS rules still interact with the cascade, selectors, and other CSS rules.
Worked example
Start with a readable base rule: .nav { display: flex; flex-direction: column; gap: 0.5rem; }. Suppose testing shows that the navigation has enough room to become a row at 48rem. Add @media (width >= 48rem){.nav { flex-direction: row; } }. At 47rem, the condition is false, so the column direction remains. At exactly 48rem and above, it is true, so the later matching declaration changes only flex-direction to row. The query does not create the navigation or identify a device; it selects one presentation rule from an explicit width condition. A separate @media (prefers-reduced-motion: reduce) rule could reduce decorative transition duration without changing the navigation's content or controls.
Key takeaway
Media queries are conditional CSS. State the environment condition precisely, keep a usable base style, and remember that a matching @media rule still participates in the normal cascade.
Quick check
3 questions here, of 5 in this lesson’s practice set. Answers stay hidden until you check.
Which query matches when the viewport width is at least 48rem?
Choose an answer, then check it.
A site has a decorative spinning icon but must preserve the status text beside it. Which conditional rule best respects a visitor who requests reduced motion?
Choose an answer, then check it.
Study tools & related lessonsYou’ll learn to · Common mistakes · Easily confused · Key vocabulary · Related
You’ll learn to
- Define a CSS media query and the @media rule.
- Identify a media type, media feature, and media condition.
- Distinguish a minimum-width condition from a maximum-width condition.
- Apply a media query that changes a rule only when its condition matches.
- Explain why a reduced-motion preference should change non-essential animation rather than remove essential information.
Common mistakes
Writing a query to identify a specific phone model.
Test the actual condition the layout needs, such as available width, rather than assuming a device category.
Assuming every @media rule overrides all ordinary CSS.
A matched rule joins the usual cascade; selector matching, specificity, and order still matter.
Using a reduced-motion rule to remove essential information or feedback.
Reduce decorative motion while preserving meaning, controls, and usable state changes.
Treating a print query as a substitute for semantic HTML.
Use print CSS for presentation while keeping the document structurally meaningful in HTML.
Easily confused
media query vs. container query
A media query tests the media environment, while a container query can test characteristics of a containing element.
min-width / width >= vs. max-width / width <=
A minimum condition matches at or above its threshold; a maximum condition matches at or below its threshold.
media feature vs. media type
A feature is a specific tested characteristic such as width; a type is a broad category such as print.
Key vocabulary
- media query
- A condition that tests characteristics of the media environment for conditional styling.
- @media
- A CSS at-rule that conditionally applies its enclosed rules when its media query matches.
- media feature
- A characteristic that a media query can test, such as width, orientation, or a user preference.
- media type
- A broad output category in a media query, such as screen or print.
- media condition
- A boolean expression made from one or more media-feature tests and logical operators.
- range syntax
- Media-query notation that compares a feature with a value, such as width >= 48rem.
- prefers-reduced-motion
- A media feature that indicates a user preference to reduce non-essential motion.
Sources & references
- CSS media queries — Mozilla / MDN Web Docs
- Media Queries Level 4 — W3C CSS Working Group
- CSS Conditional Rules Module Level 3 — W3C CSS Working Group
- Media Queries Level 5 — W3C CSS Working Group
EliExplains lessons are original prose written from the open, credible references above. See Copyright & Licensing.
Researched 2026-08-20
Educational content only. It is not medical, legal or professional advice. Found an error? Tell us.