What Responsive Design Means

People open websites on phones, tablets, laptops and big monitors, in portrait and landscape. A responsive page adapts to whatever screen it is shown on, instead of forcing everyone into the same layout.

There is one HTML page and one set of CSS. The CSS changes the look depending on the space available.

The three ingredients

1. Flexible layouts. Widths in percentages, fr, max-width, and layout tools like flexbox and grid that can wrap and reflow, instead of fixed pixel widths.
2. Flexible media. Images and videos that shrink to fit their container.
3. Media queries. CSS rules that only apply at certain screen sizes. See Media Queries.

Underneath it all is a line of HTML that makes phones behave: the viewport meta tag.

See a flexible layout

The two blocks below have no media query at all. They respond just by using sensible widths.

1
2
3
4
5

<style>
  .wrap { display: flex; flex-wrap: wrap; gap: 8px; }
  .wrap div { flex: 1 1 140px; background: #d0e8f2; padding: 14px; border: 1px solid #1a5276; }
</style>
<div class="wrap"><div>One</div><div>Two</div><div>Three</div></div>

Wide enough and they sit in a row. Narrow, and they stack. That is responsive design in its simplest form.

What it is not

• It is not a separate mobile website.
• It is not shrinking a desktop page until it fits. Text would become unreadable.
• It is not only about phones: very wide screens deserve a layout too (a max-width keeps text lines readable).