A layout tied to the browser window needs a length that responds when the window changes. CSS viewport units provide one: 1vw is 1% of the viewport’s width, so 50vw is half its width. The viewport is the framed area where the page is visible, excluding browser toolbars and the address bar. section 2.4
Size an element from the viewport
For an element that should span half the viewport, use `width: 50vw`. This measures against the viewport rather than the element’s parent. Take care with `width: 100vw`: viewport units do not account for scrollbars, so a vertical scrollbar can make a full-viewport-width element cause horizontal scrolling. section 2.4 section 2.4.1
Width is only one possible reference. `vh` measures viewport height; `vmin` and `vmax` use the smaller and larger viewport dimensions. For example, giving a square both `width: 90vmin` and `height: 90vmin` keeps it a little smaller than the viewport in either portrait or landscape orientation. section 2.4
On mobile, browser controls can change how much screen space is visible. CSS therefore also provides small-viewport units such as `svw` and large-viewport units such as `lvw`. In browsers described here, `vw`, `svw`, and `lvw` behave alike in practice, but they remain conceptually distinct and browser behavior may change. The height variants make the trade-off clearer: `100lvh` can extend below the visible area, while `100svh` may leave space beneath a full-height masthead. section 2.4.1
Scale type without letting it get too small
A font size of `2svw` scales smoothly as the window changes, but can become tiny on a narrow phone and oversized on a wide desktop. A bounded alternative is `font-size: clamp(0.9rem, 0.6rem + 0.5svw, 1.5rem)`. Include an `em` or `rem` component when sizing type with viewport units so the user’s font settings contribute to the rendered size. section 2.4.2
Table 2.1 All viewport unit types
|
Unspecified viewport
(original units)
|
Large viewport
|
Small viewport
|
Dynamic viewport
|
|
|---|---|---|---|---|
|
Width/height
|
vw
vh
|
lvw
lvh
|
svw
svh
|
dvw
dvh
|
|
Min/max
|
vmin
vmax
|
lvmin
lvmax
|
svmin
svmax
|
dvmin
dvmax
|
|
Inline/block
|
vi
vb
|
lvi
lvb
|
svi
svb
|
dvi
dvb
|
The viewport-unit table places `vw` beside its small-, large-, and dynamic-viewport counterparts, making the available width, height, and other families easy to compare. section 2.4.1
