</>
Skip to content
HTML lessons (27/60)

HTML — Responsive

Introduction – What “Responsive” Means

When you open a web page on a phone, a tablet, or a big desktop monitor, you expect the content to fit nicely.

Responsive design is the practice of building pages that automatically rearrange themselves to look good at any width.

Why it matters – users stay longer, search engines rank you higher, and you avoid creating separate pages for each device.

The Viewport Meta Tag

The very first step is to tell the browser how to treat the page’s width.

Add this line inside the <head> of every HTML document you want to be responsive:

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

What the browser displays

The browser now knows that 1 CSS pixel equals 1 device pixel, and it will not shrink the page to fit the screen automatically.

Fluid Grids with Percentages

In the last lesson you placed columns using fixed pixel widths.

Pixels are absolute; they do not change when the screen gets wider or narrower.

Replace those fixed widths with percentages so the columns grow or shrink together.

<div style="display:flex;">
  <div style="flex:1; background:#f2f2f2; padding:10px;">Column A</div>
  <div style="flex:1; background:#e2e2ff; padding:10px;">Column B</div>
</div>

What the browser displays

Two equal‑width boxes sit side‑by‑side. If you resize the window, each box expands or contracts while staying the same proportion.

Media Queries – Conditional CSS

Media queries let you apply different styles depending on the viewport width.

They are written inside a <style> block or an external CSS file.

<style>
  /* Base styles – mobile first */
  .sidebar { display:none; }
  .main { padding:10px; }

  /* Tablet and larger */
  @media (min-width: 600px) {
    .sidebar { display:block; width:30%; float:left; background:#ddd; }
    .main { margin-left:30%; }
  }

  /* Desktop and larger */
  @media (min-width: 992px) {
    .sidebar { width:20%; }
  }
</style>

What the browser displays

On a phone the sidebar disappears. On a tablet it slides in from the left, taking 30 % of the width. On a wide desktop it shrinks to 20 %.

Good to know: Write your CSS mobile‑first (small screens first). Then add min‑width queries for larger screens. This order avoids overriding rules later.

Responsive Images with srcset and sizes

Images can be heavy. Sending a huge picture to a tiny phone wastes bandwidth.

HTML offers srcset and sizes attributes to let the browser pick the best file.

<img 
  src="small.jpg"
  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
  alt="A scenic mountain">

What the browser displays

If the viewport is 500 px wide, the browser loads small.jpg. If it’s 850 px wide, it chooses medium.jpg. On a large monitor it grabs large.jpg.

Flexible Typography with vw

Font size can also adapt to the viewport width.

The unit vw means “viewport width %”. 1vw equals 1 % of the current width.

<style>
  h1 { font-size: 6vw; }
  p  { font-size: 2.5vw; }
</style>

<h1>Responsive Heading</h1>
<p>This paragraph scales with the screen.</p>

What the browser displays

The heading and paragraph grow larger on wide screens and shrink on narrow screens, keeping a balanced look.

Comparison Table: Techniques Overview

TechniqueWhen to useBrowser supportTypical markup
Viewport metaAll pagesAll modern browsers<meta …>
Percent widths / FlexboxSimple fluid gridsIE10+ (flex)style="flex:1"
Media queriesBreakpoints for layout changesIE9+@media (min-width:…)
srcset / sizesResponsive imagesChrome 23+, Safari 9+, Edge 15+<img srcset="…">
vw unitsScalable text & spacingAll modern browsersfont-size:4vw

Putting It All Together – A Mini Page

Below is a complete example that combines everything we have learned.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Demo</title>
  <style>
    body { margin:0; font-family:sans-serif; }
    header { background:#4a90e2; color:#fff; padding:2vw; text-align:center; }
    nav { background:#f0f0f0; padding:1vw; }
    .content { display:flex; flex-wrap:wrap; }
    .sidebar { flex:1 1 100%; background:#ddd; padding:2vw; }
    .main    { flex:1 1 100%; padding:2vw; }

    @media (min-width: 600px) {
      .sidebar { flex:0 0 30%; }
      .main    { flex:0 0 70%; }
    }

    img { max-width:100%; height:auto; }
  </style>
</head>
<body>
  <header>
    <h1>My Responsive Site</h1>
  </header>
  <nav>
    <a href="#">Home</a> | <a href="#">About</a> | <a href="#">Contact</a>
  </nav>
  <div class="content">
    <aside class="sidebar">
      <img src="small.jpg"
           srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
           sizes="(max-width: 600px) 100vw, (max-width: 900px) 30vw, 20vw"
           alt="Sample">
      <p>Sidebar content appears on tablets and larger.</p>
    </aside>
    <section class="main">
      <h2>Welcome!</h2>
      <p>This paragraph and the heading use viewport‑relative units, so they resize automatically.</p>
      <p style="font-size:3vw;">Resize the window to see the effect.</p>
    </section>
  </div>
</body>
</html>

What the browser displays

  • A blue header with a big title, a navigation bar, and two columns that stack on phones and sit side‑by‑side on wider screens. The image in the sidebar switches to the appropriate size automatically.*

Common mistake: Forgetting the viewport meta tag. Without it, mobile browsers shrink the page and your fluid layout looks broken.

Responsive Testing Tips

  1. Use the browser’s developer tools (F12) and toggle device mode.
  2. Test on real devices when possible – emulators can miss performance quirks.
  3. Check network speed with throttling to see how srcset saves bandwidth.
  4. Validate your HTML with the W3C validator to catch missing attributes.

Common mistakes checklist

  • Did you add the viewport <meta> tag?
  • Are you using percentages or flexbox instead of fixed pixel widths?
  • Did you set max-width:100% on images?
  • Are media queries written with min-width (mobile‑first) or max-width (desktop‑first) consistently?
  • Did you provide a fallback src for browsers that don’t support srcset?

Mini Practice

  1. Create a simple page with a header, two columns, and a footer. Make the columns stack on screens narrower than 600 px using only HTML and a viewport meta tag.
  2. Add an image to the page and use srcset so that a small version loads on phones and a large version loads on desktops.
  3. Write a media query that changes the background color of the header to dark gray when the viewport is at least 800 px wide.
  4. Replace a fixed px font size with a vw unit and observe how the text scales.
  5. Test your page in the browser’s device emulator and note any layout glitches. Fix them using the checklist above.

Related Topics

LayoutComputercodeSemanticsEntities

Frequently Asked Questions about Responsive

What is Responsive in HTML?

Responsive is a fundamental concept in HTML. This lesson explains it step by step with clear examples, making it easy for beginners to understand.

How do I learn Responsive?

Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn Responsive.

Why is Responsive important in HTML?

Responsive is essential for HTML development. Understanding this concept will help you write better code and solve real-world problems more effectively.