Responsive Web Design: The Beginner's Foundation

Beginner 12 min read

What you'll learn

✓What responsive design actually means in 2026
✓The viewport meta tag — the one HTML line every page needs
✓Mobile-first thinking and why it leads to simpler CSS
✓How media queries adapt styles to screen size
✓Fluid units: %, rem, vw/vh, and clamp()
✓How to make images and layouts adapt without media queries

Prerequisites

•A working knowledge of CSS layout — see Flexbox and The Box Model

A modern website has to look right on a phone held in portrait, a tablet in landscape, a 13-inch laptop, and a 32-inch monitor. Responsive design is the set of techniques that makes a single codebase work across that whole range — gracefully, not just tolerably.

This post is a practical foundation. By the end you will know the small handful of ideas that handle 90% of real responsive work.

What responsive design is

A responsive page rearranges itself to suit the screen it is being viewed on. Columns stack on small screens, font sizes scale, images resize, navigation collapses into a menu. The user sees a layout that feels designed for their device — even though there is only one HTML file.

Three big tools do almost all of the work:

The viewport meta tag — tells mobile browsers to use the real screen width.
Fluid units and flexible layout — let elements grow and shrink naturally.
Media queries — change styles at specific breakpoints.

We will look at each.

The viewport meta tag

Every responsive page starts with one line in the <head>:

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

Without this, mobile browsers pretend the screen is around 980 pixels wide and zoom the whole page out. Your beautiful mobile layout gets shrunk to a thumbnail. With it, the browser uses the device’s actual width and your CSS behaves as expected.

This is non-negotiable. Add it to every page you build. If your “responsive” CSS looks broken on a phone, the missing viewport tag is the first thing to check.

Mobile-first thinking

You can write CSS that targets desktop first and adds tweaks for smaller screens, or you can write CSS that targets mobile first and adds enhancements for larger ones. The second approach almost always wins.

Why mobile-first. Phone layouts are simpler — usually a single column. Building the simple version first and adding complexity at larger sizes leads to less code, fewer overrides, and fewer “why doesn’t this work on mobile?” surprises.

In practice this means your default CSS is your mobile CSS, and your media queries add things rather than remove them:

/* Default: single column, suitable for phones */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Larger screens get more columns */
@media (min-width: 640px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .cards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Read the stylesheet top to bottom: one column, then two at tablet, then three at desktop. The narrative matches how you naturally think about a layout growing.

Media queries

A media query wraps a block of CSS in a condition. The condition you will use 95% of the time is min-width:

@media (min-width: 768px) {
  /* applies when the viewport is 768px or wider */
  .sidebar {
    display: block;
  }
}

There is no list of “correct” breakpoints. Common starting values:

640px — small tablets and large phones in landscape
768px — tablets
1024px — small laptops
1280px — desktops

But the right breakpoints are the ones where your design starts to look wrong. Resize the browser slowly and watch your layout. When something cramps, that is your next breakpoint.

You can combine conditions:

@media (min-width: 768px) and (max-width: 1023px) {
  /* tablet range only */
}

@media (prefers-color-scheme: dark) {
  /* user prefers dark mode */
}

@media (prefers-reduced-motion: reduce) {
  /* user has motion sensitivity */
}

The last two are not about screen size at all — they react to user preferences. Modern responsive design covers both.

Fluid units

Pixels are fine for small details. For anything that should scale, lean on units that flex with the page or the user’s settings.

Percent (%) — relative to the parent’s size:

.column {
  width: 50%;
  padding: 5%;
}

rem — relative to the root font size (16px by default). The right unit for typography, spacing, and most sizes:

body {
  font-size: 1rem;  /* 16px */
}

h1 {
  font-size: 2rem; /* 32px */
}

.card {
  padding: 1.5rem;
}

Why rem over px? Because users can change their browser’s base font size. With rem, your whole design scales with their preference. With px, it doesn’t, and you have just ignored an accessibility setting.

vw and vh — viewport width and viewport height. 1vw is 1% of the viewport’s width:

.hero {
  height: 100vh; /* full screen height */
}

.headline {
  font-size: 8vw; /* scales with browser width */
}

vw for fluid type can be too aggressive on tiny or huge screens. The fix is clamp().

clamp(min, preferred, max) — locks a fluid value between two bounds:

.headline {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

That headline is at least 1.5rem on small screens, at most 3rem on big screens, and scales smoothly between them based on viewport width. One line replaces a stack of media queries for typography.

Try it yourself. Set an <h1>’s font-size to clamp(1.5rem, 5vw, 3rem). Open the page and resize the browser slowly from very narrow to very wide. Watch the font grow continuously and then stop at each end.

Responsive images

An oversized image that loads on a phone wastes data and slows the page down. Modern HTML has two simple tools for this.

The first is srcset, which lets the browser pick the right resolution for the device:

<img
  src="hero-800.jpg"
  srcset="
    hero-400.jpg 400w,
    hero-800.jpg 800w,
    hero-1600.jpg 1600w
  "
  sizes="(min-width: 768px) 50vw, 100vw"
  alt="A misty mountain ridge at sunrise"
/>

The browser reads the srcset and sizes, then downloads the smallest image that will still look sharp on the user’s screen. The original src is the fallback.

The second is CSS that makes the image fit its container:

img {
  max-width: 100%;
  height: auto;
  display: block;
}

These three lines applied to every image prevent the most common responsive bug — images overflowing their container — across an entire site.

Layout without media queries

Modern Flexbox and Grid can produce responsive layouts without writing any media queries at all.

The Flexbox version:

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.cards > * {
  flex: 1 1 220px; /* grow, shrink, basis of 220px */
}

Items lay out side by side, wrap to new lines as the container narrows, and never get smaller than 220px before wrapping.

The Grid version (covered in CSS Grid):

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

This one line gives you a responsive grid with no breakpoints. The browser fits as many columns as the viewport allows. Reach for this pattern any time you have a list of equally important items — cards, products, photos, team members.

When you can solve a layout with fluid units, flex-wrap, or auto-fit, prefer that over a media query. Layouts that adapt continuously feel more polished than layouts that snap at fixed breakpoints.

Try it yourself. Build a .cards grid using repeat(auto-fit, minmax(220px, 1fr)). Add six children with colored backgrounds and a fixed height. Resize the browser from a phone width to a desktop width. Count how many columns appear at each size. You did not write a single media query.

A complete responsive page sketch

Here is what putting it all together looks like:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Responsive demo</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header class="site-header">
      <h1>CodeLoom</h1>
      <nav class="site-nav">
        <a href="/">Home</a>
        <a href="/blog">Blog</a>
      </nav>
    </header>

    <main>
      <section class="cards">
        <article class="card">Card 1</article>
        <article class="card">Card 2</article>
        <article class="card">Card 3</article>
        <article class="card">Card 4</article>
      </section>
    </main>
  </body>
</html>

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  font-size: clamp(1rem, 1vw + 0.75rem, 1.125rem);
  line-height: 1.6;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.site-nav {
  display: flex;
  gap: 1rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.card {
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  background: white;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

There is exactly one element here that would benefit from a media query — and even that is debatable. The header wraps onto two lines on narrow screens because of flex-wrap. The card grid adapts because of auto-fit. The font scales because of clamp(). Images would behave because of the global rule.

This is what modern responsive CSS looks like: a lot of fluidity and very few breakpoints.

A few practical tips

Always include the viewport meta tag. It is the single most important responsive line.
Start mobile-first. Default CSS is the small-screen layout; media queries grow it.
Use rem for type and spacing. Respect the user’s font-size preference.
Use clamp() for fluid type and spacing in place of stacked media queries.
Add a global img { max-width: 100%; height: auto; } to prevent image overflow.
Test on a real phone, not just the browser’s device emulator. Some things only show up there.

Recap

You now know:

The viewport meta tag is required on every page
Mobile-first CSS leads to simpler stylesheets with fewer overrides
Media queries add styles at breakpoints chosen by your design, not a fixed list
rem, %, vw/vh, and clamp() are the units to use for anything that should scale
srcset and sizes let the browser pick the right image for the device
Flexbox flex-wrap and Grid auto-fit with minmax() give you responsive layouts with no media queries at all

Next steps

You now have the full HTML and CSS foundation: structure, semantics, the box model, Flexbox, Grid, selectors, and responsive design. The natural next step is to start applying it to a real project — pick a page from a site you like and rebuild it from scratch using only the techniques in this series. You will learn more from one full rebuild than from another ten articles.

Revisit: CSS Selectors and Specificity

Questions or feedback? Email codeloomdevv@gmail.com.