0Pricing
CSS Academy · Lesson

Viewport Units: vw vh dvh

Size elements relative to the browser viewport using vw, vh, and modern dvh units.

What are Viewport Units?

Viewport units are relative to the size of the browser viewport (the visible area of the browser window). They enable layouts and typography that scale with the available screen space.

vw — Viewport Width

1vw = 1% of the viewport width. 100vw fills the full viewport width. Useful for full-width elements without percentage complications.

.hero {
  width: 100vw;
  max-width: 100%; /* prevent horizontal scroll from borders */
}

All lessons in this course

  1. Absolute Units: px pt cm
  2. Relative Units: em and rem
  3. Viewport Units: vw vh dvh
  4. Min Max and Clamp Functions
← Back to CSS Academy