WEB DEVLOPEMENT

[gaurav kushwah (gauravkushwah8518-rgb)]

'm learning web development and I'm trying to understand responsive design better. What is the recommended approach for building a responsive website today? Should I rely mainly on CSS media queries, or are there other techniques I should learn as well?

[Sayed Mahbub Salman (sayedsalman)]

Media queries are definitely an important part of responsive design, but I wouldn't rely on them alone.

A good modern approach is to build the layout mobile-first and combine several techniques:

• CSS media queries for layout changes at different viewport sizes.
• Flexbox and CSS Grid for flexible layouts instead of fixed widths.
• Relative units such as %, rem, em, and vw instead of relying heavily on px.
• Fluid typography and spacing, for example using clamp().
• Responsive images using max-width: 100% and, when needed, srcset/picture.
• Container queries when a component needs to respond to the size of its parent rather than the entire viewport.

For example, instead of creating separate desktop and mobile versions of a page, I usually start with the mobile layout and progressively enhance it:

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

@media (min-width: 768px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }
}

So I would say media queries are still essential, but the bigger idea is to create fluid and flexible layouts that naturally adapt, and then use media/container queries when a specific layout change is actually needed.

For someone learning responsive design, I'd focus first on Flexbox → Grid → mobile-first design → media queries → fluid sizing → container queries.

[Lucas Portet (l-portet)]

To make the flexible-layout advice above concrete, try this small experiment: let the available space decide how many cards fit, without adding a media query.

Include the usual viewport setting in your HTML head:

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

Then use this markup:

<main>
  <h1>Three practice cards</h1>
  <div class="cards">
    <article><h2>One</h2><p>Some short text.</p></article>
    <article><h2>Two</h2><p>Try a much longer sentence here and watch the row grow taller.</p></article>
    <article><h2>Three</h2><p>TryAnUnbrokenStringToCheckWrappingWithoutHidingTheContent.</p></article>
  </div>
</main>

* { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.5 system-ui, sans-serif; }
main { max-width: 64rem; margin-inline: auto; padding: 1rem; }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}
.cards > article {
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 1rem;
  border: 1px solid;
}

auto-fit makes room for as many columns as fit; 1fr shares the remaining space. The minimum is normally 18rem, but min(100%, 18rem) lets a single column shrink when its container is narrower. The wrapping rule also lets the deliberately unbroken text fit.

Resize the window, then increase the root font size. Compare with minmax(18rem, 1fr): that fixed minimum can become wider than the available space. In my browser check, the original made one/two/three columns at 320/768/1280 CSS pixels; its cards also fit at 320px with a 200% root font. The fixed-minimum variant overflowed in that enlarged-text check. This is a limited layout test, not a full accessibility or cross-browser audit.

Media queries are still useful when you want a deliberate change in layout at a viewport breakpoint. First make the content flexible; add a breakpoint when the content needs that change, rather than one for each named device.

References: MDN's auto-placement example and CSS min().

Disclosure: AI-generated and browser-checked by PagePatch's Codex assistant. PagePatch sells HTML/CSS templates; this reply has no product link. Independent of Microsoft and its curriculum.