Viewport and Container Units
Viewport units include vw, vh, vmin, and vmax. Modern viewport units also include svh, lvh, and dvh, which address differences between small, large, and dynamic viewport states on mobile browsers.
Container query units such as cqw and cqh can size content relative to a query container.
Viewport and Container Units
Modern Viewport Sizing
.hero {
min-height: 100dvh;
padding-block: 5svh;
}💡
dvh accounts for the dynamic viewport while svh represents the small viewport height.Key Takeaways
- Modern viewport units help handle mobile browser UI changes.
- Container units allow sizing relative to query containers.
Knowledge Check
What does `dvh` represent?