Loading...

CSS Media Queries

Responsive Design set the mindset: one HTML tree, viewport meta, fluid shell, relative units. Media queries are the switch — blocks of CSS that turn on only when a condition matches (usually viewport width). This lesson teaches the syntax and calm habits; Responsive Images and Breakpoints deepen the toolkit next.

A media query toolkit

📊 Media queries at a glance

Piece Everyday job
@media Opens a conditional CSS block
Media feature (min-width, max-width, …) The test the browser evaluates
and Requires every listed feature to match
Comma-separated queries Logical or — any matching list applies
Rule set inside { } Styles that apply only while the query matches
Media type (screen, print) Optional filter for output medium

Without queries, every rule is “always on.” With them, you keep a solid base (from the previous lesson) and layer changes — wider columns, larger type, different nav — only when the viewport can handle them.

Anatomy of @media

A classic pattern: feature in parentheses, then a brace block of normal declarations. Use rem or em for widths when you can — they scale with root/type settings better than hard device-pixel lists.

Basic min-width media query

css 
.nav {
display: block;
}

@media (min-width: 48rem) {
.nav {
display: flex;
gap: 1rem;
}
}

Mobile-first with min-width

Write the narrow layout in the base stylesheet. Use @media (min-width: …) to add enhancements as the viewport grows. Each step should change one clear layer — spacing, columns, or navigation — not rewrite the whole page at every step.

Mobile-first enhancement

css 
.hero {
padding: 1rem;
font-size: 1.125rem;
}

@media (min-width: 40rem) {
.hero {
padding: 2rem;
font-size: 1.25rem;
}
}

@media (min-width: 64rem) {
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}

Desktop-first with max-width

If the base is a wide layout, @media (max-width: …) tightens styles below a threshold — stack columns, shrink padding, simplify chrome. Stay consistent within a project: do not bounce between pure min-width and pure max-width stacks without a reason.

Desktop-first tightening

css 
.sidebar {
width: 16rem;
float: left;
}

@media (max-width: 50rem) {
.sidebar {
width: 100%;
float: none;
}
}

Combine features with and

Chain features so all must match. Useful for ranges (min and max together) or pairing width with another feature. A comma between whole @media lists means or.

Range with and

css 
.card-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}

@media (min-width: 40rem) and (max-width: 63.99rem) {
.card-grid {
grid-template-columns: 1fr 1fr;
}
}

Beyond width — print (and calm extras)

Width is the everyday tool. Media types like print hide chrome for paper. Preference features (for example prefers-reduced-motion) belong in accessibility polish — use them sparingly here; the Breakpoints lesson organizes strategy, and Accessibility covers motion later.

Simple print styles

css 
@media print {
.site-nav,
.ad-slot {
display: none;
}

body {
color: #000;
background: #fff;
}
}

A calm breakpoint habit

Pick a short list of named widths that match your layout stress points — not every phone model. Document them (for example “nav collapses below 48rem”). Prefer fluid base + few queries over a forest of one-off device rules. Next lessons cover images and a fuller breakpoint plan.

Try it yourself

  1. Take a stacked nav and add one @media (min-width: …) that switches it to flex.
  2. Rewrite the same idea with a desktop-first max-width tighten — notice the difference in base styles.
  3. Add a range query with min-width and max-width for a two-column band only.
  4. Hide a decorative banner with @media print.
  5. Write three named breakpoints for your practice page — keep the list short.

Common mistakes

  • A separate query for every device brand instead of layout stress points
  • Forgetting the closing } so later CSS disappears into the query
  • Mixing min-width and max-width stacks randomly until cascade fights itself
  • Relying on queries alone while ignoring fluid containers and relative units from Responsive Design
  • Dumping a long breakpoint catalog here — that craft continues in Breakpoints; images in Responsive Images

Summary

  • Media queries wrap CSS so it applies only when conditions match
  • min-width enhances upward (mobile-first); max-width tightens downward (desktop-first)
  • and requires all features; commas between queries act as or
  • Keep few, named breakpoints tied to real layout needs
  • Next: Responsive Images — media that scales without breaking the column

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 55 of 62
Css Tutorial