Relative length units are highly recommended for creating flexible and responsive layouts, as they scale relative to other elements or the viewport. This makes your designs adaptable to various screen sizes.
Example 1: em Unit
/* Sets the font size of the paragraph relative to its parent's font size */
p {
font-size: 1.2em; /* 1.2 times the parent's font size */
}
div {
font-size: 16px; /* Parent font size */
}
Explanation The em unit is relative to the font size of the element's direct parent. If the parent's font size changes, the element's em-defined properties will adjust accordingly.
Example 2: rem Unit
/* Sets the font size of the heading relative to the root (html) element's font size */
h1 {
font-size: 2.5rem; /* 2.5 times the root element's font size */
}
html {
font-size: 16px; /* Root font size */
}
Explanation The rem unit is relative to the font size of the root HTML element. This provides a consistent scaling factor across the entire document, simplifying typography management.
Example 3: vw Unit
/* Sets the width of the image to 50% of the viewport width */
img {
width: 50vw; /* 50% of the browser window's width */
}
Explanation The vw unit represents a percentage of the viewport's width. This is ideal for creating elements that scale proportionally with the browser window, ensuring responsive layouts.
Example 4: vh Unit
/* Sets the height of a section to 75% of the viewport height */
section {
height: 75vh; /* 75% of the browser window's height */
}
Explanation The vh unit represents a percentage of the viewport's height. It's perfect for full-height sections or elements that need to occupy a specific portion of the user's screen.
Example 5: vmin Unit
/* Sets the font size to 8% of the smallest viewport dimension (width or height) */
.hero-text {
font-size: 8vmin; /* 8% of the smaller of viewport width or height */
}
Explanation The vmin unit represents a percentage of the smaller dimension (width or height) of the viewport. This ensures that an element will always be visible regardless of orientation.
Example 6: vmax Unit
/* Sets the width of a sidebar to 30% of the largest viewport dimension (width or height) */
aside {
width: 30vmax; /* 30% of the larger of viewport width or height */
}
Explanation The vmax unit represents a percentage of the larger dimension (width or height) of the viewport. It can be useful for elements that should always be a significant size relative to the screen.
Example 7: ch Unit
/* Sets the width of a text block to fit 60 characters of the '0' glyph */
.code-block {
width: 60ch; /* Width based on the width of the '0' (zero) character */
font-family: monospace;
}
Explanation The ch unit is relative to the width of the "0" (zero) character in the element's current font. It's particularly useful for controlling the width of text blocks to ensure readability.
Example 8: ex Unit
/* Sets the vertical spacing based on the x-height of the font */
figcaption {
margin-top: 0.5ex; /* 0.5 times the x-height of the font */
}
Explanation The ex unit is relative to the x-height of the element's current font (typically the height of lowercase 'x'). This unit is valuable for fine-tuning vertical alignment and spacing of text.
Example 9: lh Unit
/* Sets the height of a box to 3 times the line-height of its content */
.text-container {
height: 3lh; /* 3 times the calculated line-height of the element */
}
Explanation The lh unit is relative to the computed line-height of the element. It's useful for creating consistent vertical rhythm and spacing based on actual line heights.
Example 10: Combining Relative Units
/* Uses rem for base font size, em for padding, and vw for max-width for responsiveness */
.card {
font-size: 1rem; /* Base font size */
padding: 1.5em; /* Padding relative to card's font size */
max-width: 80vw; /* Max width relative to viewport */
margin: 0 auto;
}
Explanation Combining different relative units allows for highly flexible and adaptive designs. This example demonstrates how rem, em, and vw can work together for a responsive card component.