Viewport Units

Sizes controlled by the browser viewport

1. Viewport width

This box uses width: 60vw with min-width and max-width safeguards.

60vw

60% of the viewport width

Resize the browser and watch it change until a constraint takes over.

2. Viewport height families

Each box requests 18% of a viewport-height definition, with shared minimum and maximum heights.

18vh

Classic viewport height

18svh

Small viewport height

18lvh

Large viewport height

18dvh

Dynamic viewport height

Which modern unit?

svh is safest when content must fit while mobile browser controls are visible.
lvh represents the larger viewport after controls retract.
dvh tracks the currently visible viewport as controls change.

Important CSS

Viewport units size against the browser window.

.viewport-box {
  width: 60vw;
  min-width: 12rem;
  max-width: 40rem;
  height: 20vh;
}