| Unit | Complete guide to all CSS units: absolute, relative, viewport, container, and grid units with practical usage examples and an interactive converter. | |
|---|---|---|
pxAbsolute | Pixels β 1/96th of 1 inch on screen | |
ptAbsolute | Points β 1/72nd of 1 inch (print) | |
pcAbsolute | Picas β 12 points = 1 pica | |
cmAbsolute | Centimeters | |
mmAbsolute | Millimeters | |
inAbsolute | Inches (1in = 96px) | |
QAbsolute | Quarter-millimeters (1Q = 0.25mm) |
| Unit | Complete guide to all CSS units: absolute, relative, viewport, container, and grid units with practical usage examples and an interactive converter. | |
|---|---|---|
emRelative (font) | Relative to parent element's font-size | |
remRelative (font) | Relative to root (:root) font-size | |
chRelative (font) | Width of the '0' character in current font | |
exRelative (font) | Height of lowercase 'x' in current font | |
capRelative (font) | Cap height of current font | |
icRelative (font) | Advance measure of 'ζ°΄' (CJK ideograph) | |
lhRelative (font) | Line height of the element | |
%Relative (parent) | Percentage of parent element's value |
| Unit | Complete guide to all CSS units: absolute, relative, viewport, container, and grid units with practical usage examples and an interactive converter. | |
|---|---|---|
vwViewport | 1% of viewport width | |
vhViewport | 1% of viewport height | |
vminViewport | 1% of the smaller viewport dimension | |
vmaxViewport | 1% of the larger viewport dimension | |
svhViewport (dynamic) | Small viewport height (excludes mobile browser chrome) | |
dvhViewport (dynamic) | Dynamic viewport height (updates with browser chrome) | |
lvhViewport (dynamic) | Large viewport height (browser chrome hidden) | |
svw / dvw / lvwViewport (dynamic) | Small/Dynamic/Large viewport width variants |
| Unit | Complete guide to all CSS units: absolute, relative, viewport, container, and grid units with practical usage examples and an interactive converter. | |
|---|---|---|
cqwContainer | 1% of query container's inline size (width) | |
cqhContainer | 1% of query container's block size (height) | |
cqiContainer | 1% of container's inline size | |
cqbContainer | 1% of container's block size | |
cqminContainer | 1% of smaller container dimension | |
cqmaxContainer | 1% of larger container dimension |
| Unit | Complete guide to all CSS units: absolute, relative, viewport, container, and grid units with practical usage examples and an interactive converter. | |
|---|---|---|
frGrid | Fraction of available grid track space | |
min-contentGrid keyword | Smallest content fits without overflow | |
max-contentGrid keyword | Content's ideal unconstrained width | |
fit-content(N)Grid function | Clamps max-content to N maximum | |
minmax(N, M)Grid function | Track size between minimum N and maximum M |
Scales with :root font size, respects user browser settings, consistent across components
Avoid px β doesn't respect user font preferences
rem for consistent global spacing; em for spacing relative to component font size
Avoid px for components that scale
% for fluid containers; ch (45β75ch) for optimal prose line length
Avoid fixed px for main content width
dvh avoids mobile browser chrome overlap; vh is fine for desktop-only
Avoid 100vh alone on mobile β URL bar clips content
Distributes remaining space proportionally; cleaner than % in grid
Avoid combining fr with fixed px columns naively
Pixel-precise rendering; don't need to scale with text
No need for relative units here
Search a unit such as rem and read its definition alongside the related examples. Decide which reference size your layout should follow before copying a declaration into your stylesheet. The example below uses an explicit root font size so the computed value is reproducible. You can then change that root value in your own page to see how the relative size responds.
Use the reference to distinguish font relative, viewport relative, and absolute units. A numeric conversion between relative units is incomplete without the relevant font size or containing dimensions. This page is a reference, not a live layout calculator for your current website. Test zoom, responsive widths, and user font preferences in the actual layout, particularly for text that should remain readable when the browser's default size changes.
Root font size: 16px
Declaration: font-size: 1.5rem;
Computed font size: 24px
Use rem for font sizes. rem is relative to the root element font size (typically 16px), making it easy to scale the entire UI by changing the root font size. This also respects user browser font size preferences, improving accessibility. Use px only for borders, shadows, and elements that should not scale.
em is relative to the parent element's font size, which can compound in nested elements. rem is relative to the root ('<'html>) element's font size, making it more predictable. For font sizes, rem is generally preferred. em is useful for padding and margins that should scale with the component's own font size.
Use vw/vh for elements that should be sized relative to the browser viewport (e.g., full-screen hero sections, modals). Use percentages for elements that should be sized relative to their parent container. dvh (dynamic viewport height) is preferred over vh on mobile where the address bar affects height.
Container query units (cqw, cqh, cqi, cqb) are relative to a container element's size rather than the viewport. They require a container context (container-type: inline-size). They're ideal for truly responsive components that need to adapt to their container size regardless of viewport size.