CSS Relative Units
In this page:
vmin: The Smaller Viewport Dimension
vmin represents 1% of whichever viewport dimension is smaller — width or height, whichever is less at any given moment. This makes it useful for sizing elements that need to fit comfortably regardless of whether the device is in portrait or landscape orientation.
Example: vmin: The Smaller Viewport Dimension
<style>
.box {
width: 50vmin;
height: 50vmin;
background: steelblue;
color: white;
}
</style>
<div class="box">Fits comfortably in portrait or landscape</div>vmax: The Larger Viewport Dimension
vmax is the mirror image of vmin — 1% of whichever viewport dimension is larger. It is used far less often than vmin in practice, but is useful when you specifically want an element to scale with the dominant, longer dimension of the screen.
Example: vmax: The Larger Viewport Dimension
<style>
.box {
width: 50vmax;
background: steelblue;
color: white;
padding: 10px;
}
</style>
<div class="box">Scales with the longer viewport dimension</div>When to Choose rem Over em
em is relative to the current element's (or its parent's) font-size, which means nesting elements with em-based sizing compounds unpredictably — a common source of bugs. rem is always relative to the root html element's font-size, giving predictable, non-compounding sizing, which is why most modern CSS defaults to rem for spacing and typography.
Example: When to Choose rem Over em
<style>
html { font-size: 16px; }
.a { font-size: 1.5em; }
.c { font-size: 1.5rem; }
</style>
<div class="a">em compounds when nested inside other em-sized elements</div>
<div class="c">rem always stays relative to the root</div>When Percentage Makes More Sense Than viewport Units
Percentage is relative to the parent element's size, not the viewport, which makes it the right choice for components that should scale with their container rather than the whole screen — for example, a sidebar width inside a flexible layout, or an image that should fill its wrapping div.
Example: When Percentage Makes More Sense Than viewport Units
<style>
.sidebar {
width: 25%;
background: steelblue;
color: white;
padding: 10px;
}
</style>
<div style="display:flex; background:#eee;">
<div class="sidebar">Scales with its parent, not the whole viewport</div>
</div>Combining Relative Units for Robust Sizing
Production CSS often mixes relative units deliberately: rem for typography and spacing that should respect user font preferences, % for container-relative sizing, and vw/vmin sparingly for hero sections that should genuinely scale with the viewport. Relying on just one unit everywhere usually produces worse results than choosing the right unit per situation.
Example: Combining Relative Units for Robust Sizing
<style>
h1 {
font-size: 2rem;
}
.container {
width: 80%;
}
.hero {
min-height: 40vmin;
background: linear-gradient(135deg, #667eea, #764ba2);
}
</style>
<div class="container">
<h1>rem, %, and vmin, each used for what it's best at</h1>
<div class="hero"></div>
</div>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: