What are relative units in CSS?

Relative units in CSS are measurements calculated from the environment, such as the size of the container, the browser window, or the user’s base typography.

So far we have used many pixels (px) because they are easy to understand. We tell a box width: 300px and it measures 300 pixels. Very convenient. The problem appears when that box lives on a screen that doesn’t have enough space, because pixels obey without thinking.

If your box measures 800px and the mobile phone has 390px width, the browser won’t say “oops, maybe I’ll adapt this a bit.” No. It draws it, it goes off to the right, horizontal scroll appears, and it looks terrible.

Absolute vs. Relative

In CSS we have absolute units and relative units. Absolute units have a fixed size. The most common case is the pixel.

.caja {
  width: 400px;
  padding: 24px;
}

Relative units, on the other hand, are calculated from another reference.

.caja {
  width: 80%;
  padding: 1rem;
}

Here the width depends on the container, and the padding depends on the root font size. In other words, the measurement adapts to the context.

Percentages (%)

The percentage is the most classic relative unit. When we use %, the browser calculates the value taking as reference usually the size of the parent container.

.contenedor {
  width: 800px;
}

.columna {
  width: 50%;
}

.layout {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

.padre {
  height: 400px;
}

.hijo {
  height: 50%;
}

.padre {
  /* automatic height */
}

.hijo {
  height: 50%;
}

Viewport Units (vw, vh, vmin, vmax)

The viewport is the visible area of the browser. It’s not the entire page, but the window through which the user is looking.

Viewport units are calculated by taking that visible window as reference.

.hero {
  min-height: 100vh;
}

This is very useful for covers, welcome screens, full-screen panels, or areas where we want the first block to have presence.

.portada {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.pantalla-completa {
  min-height: 100vh;
  min-height: 100dvh;
}

.bloque {
  width: 100vw;
}

.bloque {
  width: 100%;
}

Typographic Units: em and rem

Now let’s talk about relative units for text and spacing. Here we have em and rem.

Both are based on font size, but they don’t take the same reference.

.caja {
  font-size: 20px;
  padding: 1em;
}

.boton {
  font-size: 1rem;
  padding: 0.75em 1.25em;
}

.boton.grande {
  font-size: 1.25rem;
}

ul {
  font-size: 1.2em;
}

p {
  font-size: 1rem;
}

h1 {
  font-size: 2.5rem;
}

.tarjeta {
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 0.75rem;
}

.grid {
  display: grid;
  gap: 1rem;
}

min(), max(), and clamp()

Modern CSS allows combining units with mathematical functions. They are tremendously useful for responsive design.

.contenedor {
  width: min(90%, 1100px);
}

.seccion {
  padding: max(1rem, 4vw);
}

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