Tips for using relative units

Basic Concepts of Relative Units

Relative units in CSS are defined relative to other lengths. They can automatically adjust their size based on the context, making responsive design easier. Common relative units include em, rem, %, vw, vh, vmin, and vmax. Understanding how these units are calculated is key to using them effectively.

.container {
  font-size: 16px;
  padding: 2em; /* 32px (16×2) */
}

.child {
  font-size: 0.8em; /* 12.8px (16×0.8) */
  margin: 1em; /* 12.8px (relative to its own font-size) */
}

Use Cases for the em Unit

The em unit is calculated relative to the current element's font size. When used for the font-size property, it inherits the parent element's font size; for other properties, it is relative to the current element's font size.

/* Example of nested list indentation */
ul {
  font-size: 16px;
}

li {
  font-size: 0.8em; /* 12.8px */
  margin-left: 1.5em; /* 19.2px (12.8×1.5) */
}

This characteristic makes em particularly suitable for scenarios where proportions relative to text size need to be maintained, such as line height and spacing.

Advantages and Limitations of the rem Unit

The rem (root em) unit is calculated relative to the root element's (html) font size. It addresses the complexity of calculations with nested em units by providing a consistent baseline.

html {
  font-size: 62.5%; /* 10px (assuming a default browser size of 16px) */
}

body {
  font-size: 1.6rem; /* 16px */
}

h1 {
  font-size: 2.4rem; /* 24px */
  margin-bottom: 1.2rem; /* 12px */
}

The rem unit excels in overall layout and component spacing but may be less flexible than em in scenarios requiring proportions relative to local text size.

Special Behavior of Percentage Units

The behavior of percentage units (%) depends on the property to which they are applied. For width/height, they are relative to the parent element; for font-size, they are relative to the inherited font size; and for transform, they are relative to the element itself.

.parent {
  width: 800px;
  font-size: 20px;
}

.child {
  width: 50%; /* 400px */
  font-size: 120%; /* 24px */
  transform: translateX(50%); /* 50% of the element's own width */
}

Percentage units are particularly useful for creating fluid layouts, especially in responsive design when combined with max-width and min-width.

Dynamic Nature of Viewport Units

Viewport units (vw, vh, vmin, vmax) are calculated relative to the browser viewport dimensions. 1vw equals 1% of the viewport width, and 1vh equals 1% of the viewport height.

/* Full-screen background element */
.hero {
  width: 100vw;
  height: 100vh;
}

/* Responsive font size */
.title {
  font-size: calc(1rem + 1vw); /* Base size + viewport proportion */
}

/* Always square element */
.square {
  width: 50vmin;
  height: 50vmin; /* 50% of the smaller viewport dimension */
}

Viewport units are ideal for scenarios requiring dynamic adjustments based on screen size, but be mindful of readability issues on mobile devices.

Combining Relative Units

In practice, multiple relative units are often combined for optimal results. For example, use rem for base spacing, em for text-related spacing, and vw/vh for large-scale elements.

html {
  font-size: 62.5%;
}

.card {
  font-size: 1.6rem;
  padding: 1.5em; /* Relative to 16px */
  margin-bottom: 2rem; /* Relative to root font size */
  max-width: 90vw; /* Viewport constraint */
  width: min(60rem, 90%); /* Combining fixed values and percentages */
}

.card__title {
  font-size: 1.2em; /* Relative to parent's 16px */
  margin-bottom: 0.5em; /* Relative to 19.2px */
}

Practical Use of Relative Units in Responsive Design

In responsive design, relative units can significantly reduce the need for media queries. By intelligently combining relative units, the number of breakpoints can be minimized.

/* Base spacing with rem */
.container {
  padding: 2rem;
  gap: 1rem;
}

/* Text size with clamp() and relative units */
.heading {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}

/* Image container with percentages and viewport units */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr));
  gap: 1rem;
}

Common Issues and Solutions

Unexpected issues may arise when using relative units. For example, the compounding effect of em units in nested structures or discrepancies in viewport unit behavior on mobile devices.

/* Solving em unit compounding */
.menu {
  font-size: 1rem; /* Reset baseline */
}

.menu-item {
  font-size: 0.9em;
}

/* Safer viewport unit usage on mobile */
.modal {
  width: min(90vw, 40rem);
  height: min(80vh, 50rem);
}

/* Preventing overly large or small text */
.text {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
}

Combining Relative Units with CSS Variables

CSS custom properties (variables) can be combined with relative units to create more flexible and maintainable design systems.

:root {
  --base-size: 1rem;
  --spacing-unit: 1rem;
  --text-scale: 1.2;
}

.article {
  font-size: var(--base-size);
  margin-bottom: calc(var(--spacing-unit) * 2);
}

.article h2 {
  font-size: calc(var(--base-size) * var(--text-scale));
}

@media (min-width: 768px) {
  :root {
    --base-size: 1.2rem;
    --spacing-unit: 1.2rem;
  }
}

Performance Considerations and Best Practices

While relative units are powerful, improper use can impact performance. For example, excessive calc() operations or complex nested relative units may cause repaints and reflows.

/* Avoid excessive calculations */
/* Not recommended */
.element {
  padding: calc(1rem + 0.5vw - 2px + 0.3em);
}

/* Recommended */
.element {
  padding: 1rem;
}

@media (min-width: 768px) {
  .element {
    padding: 1.2rem;
  }
}

/* Limit nesting depth of relative units */
/* Not recommended */
.parent .child .grandchild {
  font-size: 0.8em;
}

/* Recommended */
.grandchild {
  font-size: 0.8rem;
}