CSS Units In-Depth Overview & Use Cases

Selecting the appropriate CSS unit for dimensions, font sizes, and layout spacing is essential for responsive, accessible web design. Using fixed pixel (px) values everywhere breaks layout scaling when users change default browser font sizes or view sites on mobile devices.

CSS divides measurement units into Absolute units (fixed physical lengths like px, pt) and Relative units (calculated dynamically relative to root font size, parent dimensions, or screen viewport bounds). Modern CSS also introduces dynamic mobile viewport units (dvh, svh) that adapt smoothly as browser address bars expand and collapse.

Key Real-World Use Cases
#1Accessible Typography

Using rem for font sizes so text scales proportionally when users increase browser zoom or system font size.

#2Component Padded Scaffolding

Using em for button padding so internal icon/text padding scales automatically when button font-size changes.

#3Full-Screen Mobile Sections

Using 100dvh (Dynamic Viewport Height) to prevent unwanted mobile browser scrollbars caused by collapsing URL address bars.

#4Border Widths & Shadows

Using px for hair-line borders (1px) and subtle box-shadow offsets that should remain fixed at high DPI resolution.

CSS Units Calculator & Visualizer
Root html size:
rem Unit Card (1.5rem)24.0px
Typography scaling with rem
Viewport Unit (50vw)50% of screen width
50vw width
Calculated CSS Rules
/* Root Definition */ html { font-size: 16px; } /* Calculated Sizing */ .card-rem { font-size: 1.5rem; /* 24.0px */ } .button-em { padding: 1.25em; /* 20.0px relative to parent */ } .hero-width { width: 50vw; }

Absolute Units (px) vs Relative Units (rem, em, %)

Absolute units are anchored to fixed physical measurements, whereas relative units compute their value based on surrounding context or font size definitions.

UnitTypeRelative ToBest Used For
pxAbsolute1 physical pixel (screen pixel ratio)Borders (1px), subtle shadow offsets, micro-dividers
remRelativeRoot element font size (usually 16px)Global font sizes, layout margins, padding, component widths
emRelativeParent / Current element font sizeComponent-scoped padding, icon sizes bound to parent text
%RelativeParent container dimensionFluid layout column widths, image max-width bounds

Standard Viewport Units (vh, vw, vmin, vmax)

Viewport units are calculated as percentages of the visible browser window size:

  • 1vw: Equal to 1% of total viewport width.
  • 1vh: Equal to 1% of total viewport height.
  • 1vmin: Equal to 1% of the smaller viewport dimension (width or height).
  • 1vmax: Equal to 1% of the larger viewport dimension (width or height).

Modern Mobile Viewport Units (dvh, svh, lvh)

On mobile browsers (Safari iOS, Chrome Mobile), standard 100vh includes the height beneath expandable browser address bars, causing content clipping.

Modern CSS introduced dynamic viewport units to solve mobile browser UI changes:

UnitFull NameBehavior on Mobile Devices
svh / svwSmall Viewport Height/WidthCalculated when mobile browser address bar is EXPANDED (smallest visible height).
lvh / lvwLarge Viewport Height/WidthCalculated when mobile browser address bar is COLLAPSED (largest visible height).
dvh / dvwDynamic Viewport Height/WidthDynamically adapts in real time as the browser address bar expands or shrinks!
Full-Screen Mobile Container Reset
.full-screen-hero { /* Fallback for older browsers */ min-height: 100vh; /* Modern dynamic mobile viewport fix */ min-height: 100dvh; }
100dvh ensures full-height sections fit perfectly inside mobile device screens without triggering unwanted page scrolling.

Frequently Asked Questions

Pixels are static. If visually impaired users change their default browser font size from 16px to 24px, sites built with px text stay tiny and unreadable. rem text scales seamlessly with user accessibility settings.

rem is always relative to the root (<html> font-size). em is relative to the current element font-size, which can cause compound scaling bugs when nesting multiple elements.

On mobile browsers, 100vh includes the space occupied by the top address bar and bottom navigation bar. Using 100dvh (Dynamic Viewport Height) prevents content from being hidden under mobile browser chrome.