Skip to main content
Responsive Web Design
CHAPTER 05 Beginner

CSS Units for Responsive Design

Updated: May 12, 2026
20 min read

# Chapter 5: CSS Units for Responsive Design

1. Introduction

Welcome to Chapter 5! To build truly responsive websites, we have to stop thinking in terms of absolute, rigid sizes. If you build a house with bricks that never change size, the house is rigid. But what if you built a house out of rubber bands and balloons? It would stretch and adapt. In CSS, our "rubber bands" are relative units.

2. Learning Objectives

By the end of this chapter, you will be able to:
  • Understand the difference between absolute (px) and relative units.
  • Confidently use rem and em for typography and spacing.
  • Utilize percentages (%) for fluid layouts.
  • Harness Viewport units (vw, vh) for full-screen designs.

3. Beginner-Friendly Explanations

  • px (Pixels): This is an absolute unit. 10px is always 10px, whether you are on a watch or a jumbotron. It's safe but rigid.
  • % (Percentages): Think of this as sharing a pizza. If you say a box is 50% wide, it takes up half of whatever container it is inside.
  • vw & vh (Viewport Width/Height): Think of the browser window as a giant grid of 100x100 squares. 1vw is 1 square wide. 100vh means "take up the full height of the visible screen."
  • rem (Root EM): Think of this as a multiplier based on the browser's default text size (usually 16px). 2rem means "2 times the default size" (32px).
  • em: Similar to rem, but it multiplies based on the *parent* element's font size, not the root.

4. Syntax Explanation

css
123456789 
.container {
  width: 100%;       /* Takes full width of parent */
  height: 100vh;     /* Takes full height of the screen */
}

h1 {
  font-size: 2.5rem; /* 2.5 * 16px = 40px */
  margin-bottom: 1em; /* 1 * 40px = 40px margin */
}

5. Real-World Examples

Imagine a modern Hero Section (the big banner at the top of a website):
  • The background image uses height: 100vh; to ensure it always covers the exact height of the user's screen, whether they are on a tall phone or a widescreen monitor.
  • The main title uses font-size: 3rem; so it respects the user's browser settings but scales up cleanly.
  • The layout columns use width: 50%; to split the screen evenly on desktop.

6. Multiple Code Examples

Example 1: The Danger of em Compounding

Because em looks at its parent, nesting elements can cause sizes to blow out of control.
html
12345678 
<style>
  .box { font-size: 2em; } /* 2x the parent */
</style>
<div class="box"> Text is 32px
  <div class="box"> Text is 64px!
    <div class="box"> Text is 128px!!! </div>
  </div>
</div>

Example 2: The Safety of rem

rem always looks at the root (<html>), so it never compounds.
html
12345678 
<style>
  .box { font-size: 2rem; } /* Always 2x the root (32px) */
</style>
<div class="box"> Text is 32px
  <div class="box"> Text is 32px
    <div class="box"> Text is 32px </div>
  </div>
</div>

Example 3: Viewport Units for Full-Screen Layouts

css
1234567 
/* Responsive CSS Example */
.hero-section {
  width: 100vw;  /* 100% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
  background-color: darkblue;
  color: white;
}

7. Output Explanations

In Example 3, using 100vh guarantees that the .hero-section will perfectly fill the screen without the user having to scroll down immediately. If the user flips their phone horizontally (landscape), the vh changes dynamically to match the new, shorter height!

8. Common Mistakes

  1. 1. Using 100vw with vertical scrollbars: If your page has a vertical scrollbar, the scrollbar takes up some width. 100vw ignores the scrollbar and will push your content slightly off the screen, causing a horizontal scrollbar. Use width: 100%; instead for main containers.
  1. 2. Using vh heavily on mobile Safari: Mobile browsers have toolbars that appear and disappear as you scroll. This changes the true "vh" and can cause your layout to jump erratically. (Modern CSS introduced dvh (Dynamic Viewport Height) to fix this!).

9. Best Practices

  • Use rem for font sizes and spacing (margins/padding).
  • Use % for widths of grid columns or containers.
  • Use px ONLY for tiny details like borders (border: 1px solid black) or specific minimums.
  • Use em for margins/padding *only* if you specifically want the spacing to scale up and down alongside the font size of that specific element.

10. Exercises

  1. 1. Create a div and set its height to 50vh. Open it in your browser and manually resize the height of your browser window. Watch the div stretch and shrink.
  1. 2. Build a button using padding: 1em 2em;. Change the font-size of the button and notice how the padding automatically scales to keep the button's proportions perfect.

11. Mini Project: Flexible Content Layout

Build a responsive card that takes up 90% of the screen on mobile, but uses max-width to stay beautiful on desktop. Use rem for typography.
html
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 
<!-- Responsive Design Example -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Units Mini Project</title>
    <style>
        body {
            /* Default 16px. We base all rems off this. */
            font-family: Arial, sans-serif;
            background: #e2e8f0;
            display: flex;
            justify-content: center;
            padding: 5vh 0; /* 5% of screen height padding */
        }

        .flexible-card {
            background: white;
            width: 90%; /* Fluid width */
            max-width: 400px; /* Rigid cap for desktop */
            padding: 2rem; /* 32px padding based on root */
            border-radius: 1rem; /* 16px rounded corners */
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
        }

        .flexible-card h2 {
            font-size: 1.5rem; /* 24px */
            margin-top: 0;
            margin-bottom: 1rem;
        }

        .flexible-card p {
            font-size: 1rem; /* 16px */
            line-height: 1.5;
            color: #4a5568;
        }

        .btn {
            display: inline-block;
            background: #3182ce;
            color: white;
            text-decoration: none;
            padding: 0.75em 1.5em; /* Proportional to font-size */
            border-radius: 0.5rem;
            margin-top: 1.5rem;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="flexible-card">
        <h2>Relative Units Rock</h2>
        <p>By using percentages for width and rems for padding and text, this card is perfectly responsive without needing a single media query.</p>
        <a href="#" class="btn">Read More</a>
    </div>
</body>
</html>

12. Coding Challenges

Challenge 1: Modify the Mini Project button (.btn). Add a hover state &:hover (or .btn:hover) that increases the font-size to 1.2rem. Notice how the em based padding forces the button to grow proportionately!

13. MCQs with Answers

Q1: Which unit is relative to the root <html> font size? A) px B) em C) rem D) vw *Answer: C*

Q2: If you want a div to take up exactly half the height of the user's screen, which unit should you use? A) 50% B) 50vh C) 50vw D) 50px *Answer: B*

14. Interview Questions

  1. 1. Why should we avoid using px for font sizes?
*Answer:* It breaks accessibility. Users with visual impairments often increase their browser's default text size. px is absolute and ignores the user's settings, whereas rem scales based on the user's preference.
  1. 2. What is the difference between width: 100% and width: 100vw?
*Answer:* 100vw means 100% of the entire viewport width, including the space taken up by a vertical scrollbar. 100% means 100% of the parent container's available width, safely ignoring the scrollbar.

15. FAQs

Q: I see some developers set the HTML font size to 62.5%. Why? A: 62.5% of 16px (the browser default) is 10px. This is an old trick to make math easier: 1.4rem equals exactly 14px. However, modern workflows usually avoid this trick and just stick to standard 16px base math for better accessibility scaling.

16. Summary

Mastering CSS units is the secret to fluid, effortless responsive design. Rely on % for structural layout, rem for typography and spacing, vh/vw for full-screen effects, and reserve px only for strict boundaries.

17. Next Chapter Recommendation

We have flexible units, but sometimes we need structural layout changes (like going from 1 column to 3 columns). To do that, we need logic. Dive into Chapter 6: CSS Media Queries!

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter Responsive Typography
Next Chapter CSS Media Queries

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6