Platform under construction

Responsive CSS

Advanced

Media Queries

Media queries apply CSS only when a condition is true. They let a design adapt to width, pointer type, motion preferences and more.

@media (min-width: 52rem) {
  .layout { grid-template-columns: 18rem 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}

Responsive mental model

Media queries are conditional CSS, not device guesses.

A media query asks the browser a question. If the answer is true, the rules inside it apply.

Width queries are common, but responsive CSS can also respond to hover capability, pointer precision, reduced motion and color scheme.

Good media queries are sparse and purposeful. They change the layout when the design needs a new structure, not because a specific device exists.

min-width

Enhance the layout above a certain width.

max-width

Apply a rule below a certain width when needed.

range syntax

Modern readable comparisons such as width >= 48rem.

user preference

Respect reduced motion and color preferences.

Visual model

Turn the responsive idea into something you can see.

Base

Always applies

The default rules must already be usable.

48rem

Add columns

A layout change starts when there is enough space.

Hover

Fine pointer

Hover effects belong on devices that can hover.

Motion

Reduced

Animation should respect user preference.

Good CSS versus fragile CSS

Queries based on needs

.layout { display: grid; gap: 1rem; }

@media (min-width: 52rem) {
  .layout { grid-template-columns: 18rem 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}

Device-name thinking

@media (max-width: 428px) { /* iPhone */ }
@media (max-width: 390px) { /* other iPhone */ }
@media (max-width: 393px) { /* another one */ }

Rules of thumb

Responsive CSS should reduce stress, not create more of it.

Start outside the query

Write the default experience first.

Use rem breakpoints

Breakpoints tied to text scale often age better than hard pixel device widths.

Query capabilities

Hover and pointer queries prevent awkward desktop-only effects on touch screens.

Respect preferences

Reduced motion is not optional for serious production work.

Avoid breakpoint soup

Too many width queries make CSS hard to maintain.

Name intent in comments

If a query exists for a layout reason, make that reason clear.

Production thinking

Responsive quality is proven at awkward widths.

Why does this matter?

Media queries let one document become many comfortable layouts. Used badly, they become a pile of device patches.

Accessibility

Preference queries help users who need less motion or different visual modes. Capability queries avoid hover-only interaction traps.

Production note

Audit media queries by purpose. If two queries solve the same layout pressure, consolidate them.

SEO note

The same content should remain accessible across media query states. Do not create separate hidden versions of essential copy.

Live code lab

Change the CSS and watch the interface respond.

The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.

Mini assignment

Try this now.

Change min-width to 38rem and decide if the columns appear too early.
Add @media (hover: hover) and create a hover effect only there.
Write a comment that explains why the breakpoint exists.

Practice assignment

Do this before moving to the next lesson.

Create a stacked layout outside any query.
Add one min-width query for a two-column layout.
Add one preference or capability media query.

HTML CSS

Live preview

Self-check

Before you continue, prove that you understand Media Queries.