Stop 03 · CSS3Topics · 8/17

Media Queries

In short

The same page has to look good on a ₹8,000 phone and a 27-inch monitor. Media queries let you change styles based on screen size and user preferences.

`@media` rules apply CSS conditionally based on viewport width, orientation or device features — the core mechanism behind responsive design. Responsive CSS should adapt to the content and available space rather than targeting a long list of specific devices, which makes layouts more durable over time.

The jaadu mascot at a wardrobe holds a woolly sweater and a cotton t-shirt, with a snowflake and a sun nearby.

Think of it like this

Dressing for the weather

You wear the same body every day but change clothes for Delhi winters and Chennai summers. Media queries are the 'if it's cold, wear a sweater' rules for your page: same HTML, different CSS depending on the screen.

Watch it happen

One card list, three screen widths

360px

640px

1024px

1440px

1/4On a phone, no query matches. The base styles give one column.

The big ideas

What you need to know

Mobile first

Write base styles for phones, then use min-width queries to add layout for bigger screens.

Breakpoints follow content

Add a breakpoint where your design starts to look bad, not at a list of specific phone models.

User preferences

prefers-color-scheme detects dark mode. prefers-reduced-motion tells you to calm down animations.

Container queries

@container lets a component react to its own box size instead of the whole screen. Supported in modern browsers.

See it in code

Walk through the code

css

1.cards { display: grid; gap: 1rem; }       /* phone: one column */2 3@media (min-width: 640px) {4  .cards { grid-template-columns: 1fr 1fr; }5}6 7@media (min-width: 1024px) {8  .cards { grid-template-columns: repeat(3, 1fr); }9}10 11@media (prefers-color-scheme: dark) { body { background: #111; color: #eee; } }12 13@media (prefers-reduced-motion: reduce) {14  * { animation: none !important; transition: none !important; }15}

1/4Base styles with no query are for phones: one column.

Mobile styles come first with no query. Each min-width block adds more columns as the screen grows.

Save yourself the pain

Common mistakes

Oops

Designing for desktop first and patching mobile with lots of max-width overrides.

Do this instead

Start with mobile. It's simpler to add layout than to undo it.

Oops

Forgetting the viewport meta tag and thinking media queries are broken.

Do this instead

Add <meta name="viewport" content="width=device-width, initial-scale=1"> first.

Your mission

One page, three looks

~25 min

Quick check

With a mobile-first approach, what kind of media queries do you mostly write?

Go deeper

1Add breakpoints to make a fixed layout responsive at mobile/tablet/desktop widths. Test the result on both a successful path and an invalid or unexpected input.
2Practice mobile-first media queries (`min-width` rather than `max-width`). Test it with at least one normal case and one edge case so you can explain the behavior confidently.
3Learn `prefers-color-scheme` for dark mode support.