What responsive web design means

Responsive web design adapts content and layout to the space available. It combines flexible layout, flexible media and conditional styles. It still requires testing: the label “responsive” does not guarantee a usable page on every device.

Working example

<div class="cards">
  <article>
    <h2>Structure</h2>
    <p>Content sets the starting point.</p>
  </article>
  <article>
    <h2>Layout</h2>
    <p>Cards wrap when space runs out.</p>
  </article>
  <article>
    <h2>Testing</h2>
    <p>Check real content and zoom.</p>
  </article>
</div>

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
}
article {
  padding: 1rem;
  background: #dbeafe;
  overflow-wrap: anywhere;
}

Start with the document

A standalone mobile page normally includes <meta name="viewport" content="width=device-width, initial-scale=1">. The copied example includes it. Do not disable zoom to make a layout look fixed.

Use relative or bounded sizes rather than large fixed widths. Images often need max-width: 100%; height: auto; responsive image sources can also reduce transferred bytes. Allow controls and text to wrap without hiding essential actions.

Add conditions where needed

A media query can change columns when the viewport has room. A container query responds to the component’s container. Test narrow and wide widths, keyboard navigation, zoom and long text. Responsive design includes keeping content usable, not only fitting its outer edges.

Sources

Reference 1 provide the technical details and current compatibility information.