Introduction

Responsive units in CSS allow your layout, fonts, and spacing to adapt automatically to different screen sizes. This is the foundation of modern, mobile-friendly web design.

1. Percentages (%)

Percentage values scale relative to the parent container.

.container {
  width: 80%;
}
    

2. Viewport Width (vw) & Viewport Height (vh)

Responsive to the browser window.

.hero {
  height: 50vh; /* 50% of screen height */
  font-size: 3vw; /* scales with screen width */
}
    

3. rem (Root EM)

Based on the root font size (usually 16px).

.title {
  font-size: 2rem; /* 2 × root font */
}
    

4. em

Relative to the parent element’s font size.

button {
  padding: 1em 2em;
}
    

5. vmin & vmax

vmin = smallest dimension of viewport vmax = largest dimension of viewport

.box {
  width: 20vmin; /* scales with smaller side */
}
    

6. clamp() – the Ultimate Responsive Unit

clamp(min, preferred, max)

h1 {
  font-size: clamp(1.5rem, 5vw, 4rem);
}
    

This means: never smaller than 1.5rem, never larger than 4rem, but scale with 5vw.

7. Responsive Example: Hero Text

.hero-title {
  font-size: clamp(2rem, 6vw, 5rem);
  padding: 5vh;
}
    

8. When to Use What

• % – containers, grids, flexible boxes
• vw/vh – big texts, fullscreen sections
• rem – consistent typography
• em – spacing relative to parent
• vmin/vmax – scalable circles, shapes
• clamp() – best for responsive fonts

Summary

Responsive units keep your layout fluid and adapt to any device. Master them and you’ll make sites that look clean on phones, tablets, laptops, and massive monitors without writing dozens of media queries.