Responsive Design: One Page, Every Screen

18 minBeginnerHTML · CSS · JS

In this lesson

Add the viewport meta tag and explain why phones need it
Replace fixed widths with fluid ones (max-width, %) and make images shrink to fit
Write mobile-first media queries with min-width

The big idea

Most people will open your site on a phone. Build for the small screen first, let things stretch, then add layout for bigger screens with media queries.

A responsive page doesn't have a "mobile version" and a "desktop version". It's one page whose layout adapts to the space it gets. It takes four small habits.

1. The viewport meta tag

HTML

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

Without this line, mobile browsers assume your page was designed for a desktop. They lay it out on a wide virtual screen (often around 980px) and shrink everything down, so the text becomes tiny. This tag says: use the real width of the device. It goes in <head>, on every page.

2. Fluid widths

Fixed: always 960px, even on a 360px phone

CSS

.container {
  width: 960px;
  margin: 0 auto;
}

Fluid: up to 960px, narrower when it has to be

CSS

.container {
  max-width: 960px;
  margin: 0 auto;
}

max-width sets a ceiling, not a fixed size. On a big screen it looks identical; on a phone it shrinks instead of causing sideways scrolling.

3. Flexible images

CSS

img {
  max-width: 100%; /* never wider than its container */
  height: auto;    /* keep the proportions when it shrinks */
}

Keep the width and height attributes on your <img> tags too. The browser uses them to reserve the right amount of space before the image downloads, so the page doesn't jump around.

4. Mobile-first media queries

A media query wraps CSS that should only apply when a condition is true. Mobile-first means your normal CSS is the phone layout, and min-width queries add changes as the screen gets bigger:

style.css

/* Phones: one column (the default) */
.cards {
  display: grid;
  gap: 16px;
}

/* 600px and wider: two columns */
@media (min-width: 600px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 900px and wider: three columns */
@media (min-width: 900px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

Order matters

On a 1000px screen both queries above are true. When two rules are equally specific, the one that comes later in the file wins. So with min-width, write your breakpoints from small to large.

Choosing breakpoints

Don't chase specific phone models. Make the preview wider bit by bit, and add a breakpoint where your layout starts to look stretched or cramped. Use the Phone, Tablet and Fit buttons above the preview to test.

%: A percentage of the parent's size.
rem: Relative to the root font size (usually 16px). Great for font sizes and spacing that respect the user's settings.
vw / vh: 1% of the viewport's width / height. 100vh is a full screen tall.

Click the Phone button above the preview: the page is wider than the screen. Fix it in three steps:

1. In index.html, add the viewport meta tag inside <head>. 2. In style.css, make .container fluid: swap its fixed width for a max-width. 3. Add an img rule so images are never wider than their container and keep their proportions.

Checks

The page has a viewport meta tag using the device width
.container shrinks to fit a 320px-wide phone
Images can't grow wider than their container

Check understanding

What happens on most phones if you leave out the viewport meta tag?

The page won't loadThe page is laid out as if on a wide desktop screen, then zoomed out so text looks tinyMedia queries run twice

In a mobile-first stylesheet, what is the CSS outside any media query for?

Desktop screens onlySmall screens — and it's the base every larger screen builds onPrinting

What does img { max-width: 100%; } do?

Stretches every image to fill its containerLets an image shrink to fit its container, but never grow beyond its natural sizeCrops the image

What you learned

Every page needs <meta name="viewport" content="width=device-width, initial-scale=1">.
Prefer max-width over fixed width; give images max-width: 100%; height: auto.
Mobile first: default CSS for phones, @media (min-width: …) to add layout for bigger screens.
Write min-width breakpoints from small to large — later rules win.

Preview

Console output from your code appears here.