Viewport unit
The CSS vw unit is a viewport-relative length equal to one percent of the viewport width.
Math for Web Design
The vw unit is a CSS viewport unit equal to one hundredth of the viewport's width.
- How it is used
- Scales layouts and typography directly with browser viewport dimensions for responsive CSS.
- How deep it goes
- Defines vw mathematically, compares viewport and percentage sizing, and works through constrained fluid typography and mobile-height behavior.
- Examples
- Uses a 10vw heading, a full-screen hero, bounded landing-page text, and a mobile 100vh overflow case.
- What you can do after
- Apply it via CSS viewport units and clamp() to build fluid, bounded layouts and type.
CSS in Depth, Second Edition
The CSS vw unit represents one percent of the viewport width.
- How it is used
- Uses viewport-relative lengths to size elements against the visible browser frame and to scale typography with viewport width.
- How deep it goes
- Defines vw mathematically, works through sizing and typography examples, and addresses scrollbar and mobile-viewport caveats without detailing browser internals.
- Examples
- Shows a 90vmin square across screen orientations and font sizes that respond continuously to viewport width.
- What you can do after
- Evaluate/understand when viewport-width sizing fits a layout and when scrollbars or unbounded font scaling make it troublesome.
Read how CSS in Depth, Second Edition explains viewport unit →
Web Design Playground, Second Edition
The vw unit is a CSS viewport-relative length unit equal to one percent of the viewport width.
- How it is used
- Uses vw for horizontal measurements that should scale with the browser viewport rather than a parent element.
- How deep it goes
- Explains viewport-relative sizing, numeric conversion, and percentage contrast without developing a complete vw implementation.
- Examples
- Uses a 1,600-pixel viewport calculation and contrasts a child sized at 75% of its parent with viewport-relative sizing.
- What you can do after
- Apply vw to horizontal measurements that need to scale with viewport width.
Read how Web Design Playground, Second Edition explains viewport unit →
Related concepts
- viewportuses · A viewport is the visible region through which a browser or graphical interface displays a document or content.
- dynamic viewport unitincludes · A dynamic viewport unit is a CSS viewport unit whose resolved size tracks the viewport as browser interface elements appear or disappear.
- small viewport unitincludes · A small viewport unit is a CSS viewport-relative unit based on the corresponding dimension of the small viewport.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.