The essentials
Quick reference
One focused task per row. Jump to the related section for complete, working examples.
| Use | Syntax | Examples |
|---|---|---|
| Scale from the root font | .prose { font-size: 1rem; max-inline-size: 68ch; } | View examples |
| Scale a component locally | .badge { padding: 0.25em 0.75em; border-radius: 1em; } | View examples |
| Reserve by line height | .excerpt { min-block-size: 3lh; } | View examples |
| Use physical units for print | @media print { @page { margin: 15mm; } } | View examples |
| Follow the dynamic viewport | .screen { min-block-size: 100dvh; } | View examples |
| Provide a viewport fallback | .hero { min-height: 100vh; min-height: 100svh; } | View examples |
| Scale inside a container | .card { padding: clamp(1rem, 4cqi, 2rem); } | View examples |
| Combine compatible dimensions | .main { inline-size: calc(100% - 2rem); } | View examples |
| Bound a fluid value | h1 { font-size: clamp(2rem, 1rem + 4vw, 4.5rem); } | View examples |
| Enforce a useful minimum | .sidebar { inline-size: max(18rem, 25%); } | View examples |
| Round to an interval | .meter { inline-size: round(down, 83%, 10%); } | View examples |
| Gate newer math | @supports (width: round(1px, 1px)) {
.meter { width: round(down, 83%, 10%); };
} | View examples |
| Register a numeric token | @property --progress {
syntax: "<number>";
inherits: false;
initial-value: 0;
} | View examples |
| Respect reduced motion | @media (prefers-reduced-motion: reduce) {
:root { --motion-scale: 0; };
} | View examples |
CSS values are resolved in context: percentages need a reference size, font-relative units inherit typography, and viewport or container units follow a particular box. Prefer units that preserve zoom and user font preferences, bound fluid values, and treat newer math functions as progressive enhancements.
Step by step
Detailed examples
Choose units from the relationship you need
rem follows the root font size. An em used in font-size follows the parent's computed font size; on most other properties it follows the element's own computed font size. ch is useful for approximate text measure; lh and rlh follow line heights. CSS px is a reference pixel, not necessarily a hardware pixel. Reserve cm, mm, in, pt, and pc mainly for print because physical correspondence is not guaranteed on screens.
:root { font-size: 100%; }
.article { font-size: 1rem; line-height: 1.6; max-inline-size: 68ch; }
.article h2 { margin-block: 1.5lh 0.5lh; }
@media print { .article { max-inline-size: none; } }Distinguish viewport and container dimensions
svh uses the small viewport, lvh the large viewport, and dvh the dynamic viewport. Dynamic units can change during scrolling and cause layout work; choose them only when tracking browser chrome is useful. vi and vb follow writing-mode axes. Container units such as cqi require an eligible query container; otherwise they use the small viewport unit for that axis. Keep a legacy vh fallback when older browsers matter.
.hero { min-block-size: 100vh; min-block-size: 100svh; }
.cards { container-type: inline-size; }
.card { padding: clamp(1rem, 3cqi, 2.25rem); }
@media (min-width: 60rem) { .hero { min-block-size: 70svh; } }Compose and bound responsive values
calc() combines compatible typed values and requires whitespace around binary + and - operators. min() selects the smallest argument, max() the largest, and clamp(minimum, preferred, maximum) clamps the preferred result. Percentages resolve against property-specific reference boxes, so the same percentage means different things for width, padding, transforms, and positioning.
.layout {
inline-size: min(100% - 2rem, 75rem);
margin-inline: auto;
gap: clamp(1rem, 0.5rem + 2vw, 3rem);
}
.layout h1 { font-size: clamp(2rem, 1.25rem + 3vw, 4rem); }Progressively enhance with newer math
Values Level 4 defines stepped functions round(), mod(), and rem(), plus constants such as pi and infinity; later work adds trigonometric, exponential, and related functions. Support varies by function and browser version. Supply a complete baseline declaration first, then use @supports around the enhanced declaration rather than depending on partial parsing.
.meter { inline-size: 80%; }
@supports (inline-size: round(down, 83%, 10%)) {
.meter { inline-size: round(down, 83%, 10%); }
}
.orbit { transform: rotate(0deg); }
@supports (left: calc(sin(45deg) * 1px)) { .orbit { transform: rotate(45deg); } }Preserve types in custom calculations
Custom properties normally store token streams, so invalid combinations can fail only when substituted. @property or CSS.registerProperty() declares a grammar, initial value, and inheritance behavior, enabling validation and interpolation. Registration is global to the document name; choose component-specific names and retain an ordinary fallback before using the token.
@property --progress {
syntax: "<number>";
inherits: false;
initial-value: 0;
}
.progress { --progress: 0.65; inline-size: calc(var(--progress) * 100%); transition: --progress 300ms; }
@media (prefers-reduced-motion: reduce) { .progress { transition: none; } }Keep math compatible with user preferences
Do not replace all font-relative sizing with viewport units: text must still enlarge under browser zoom and user font settings. Combine rem with a fluid term, avoid fixed heights around text, and test at 200% zoom and narrow reflow. Math is calculated by the engine and is normally inexpensive; rapidly changing dynamic viewport or custom-property values can still trigger layout or paint.
:root { --motion-scale: 1; }
.panel { min-block-size: 12rem; padding: clamp(1rem, 0.75rem + 1vi, 2rem); }
.panel h2 { font-size: clamp(1.5rem, 1.25rem + 1vi, 2.25rem); }
.panel__body { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { :root { --motion-scale: 0; } }Local code tester
Tune bounded responsive values
Resize the preview to see font size, padding, and container-local spacing remain within useful bounds.
Sources and further reading
References
Authoritative documentation used to verify and expand this cheat sheet.
Help us improve
Found a typo or missing example?
Tell us what would make this cheat sheet clearer, more complete, or more useful.