CSS Units and Values

rem, em, vw, vh, clamp, min, max, and responsive sizing.

Overview

Understanding CSS units is essential for responsive design.

Key Concepts

• Relative Units — em, rem, %
• Viewport Units — vw, vh, vmin, vmax
• clamp() — Responsive values with bounds
• min()/max() — Conditional values
• calc() — Mathematical expressions

Code Examples

/* rem vs em */
html { font-size: 16px; }

.rem-based {
  font-size: 1.5rem; /* 24px */
  padding: 1rem; /* 16px */
}

.em-based {
  font-size: 1.5em; /* Relative to parent */
  padding: 1em; /* Relative to font-size */
}

/* Viewport units */
.full-height {
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height */
}

.sidebar {
  width: 25vw;
}

/* clamp() for responsive values */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

.container {
  width: clamp(300px, 80%, 1200px);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 3rem);
}

/* min() and max() */
.element {
  width: min(100%, 500px);
  height: max(200px, 50vh);
  font-size: max(1rem, 2vw);
}

/* calc() */
.custom-width {
  width: calc(100% - 200px);
  height: calc(100vh - 80px);
}

.complex-calc {
  font-size: calc(1rem + 0.5vw);
  padding: calc(1rem + 2vw);
}

/* Aspect ratio */
.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.square {
  aspect-ratio: 1;
}

/* Container queries */
.responsive-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .child {
    width: 50%;
  }
}

/* Modern length queries */
.element {
  width: clamp(200px, 50cqi, 800px);
}

/* CSS math functions */
.complex-value {
  width: calc(max(200px, 50%) + 2rem);
  height: min(100vh - 100px, 600px);
}

Practice

Build a responsive layout using only modern CSS units.