CSS: viewport based units (vw vh vmin vmax vi vb ...)

Viewport based units

Viewport is the visible area. On desktop browser, it's the window. On mobile phone, it's the screen area.

🛑 WARNING: all viewport length units, including small viewport width, their values include the width used by classic scrollbar that appears as vertical bar on the right side. see CSS viewport scrollbar test 2026-08-05

vw

1% of the viewport width.

When browser window changes size, vw also changes.

🟢 TIP: One great use of vw is to specify height as a percentage of width. You can't do this with percentage. see CSS: Fixed Aspect Ratio

vh

1% of viewport height.

vmin

the smaller of vw or vh.

vmax

the larger of vw or vh.

Large / small / dynamic versions of viewport sizes

There are large / small / dynamic versions of vw and vh.

On desktop browsers, they are equivalent, because the viewport size does not change dynamically like on mobile phone device.

On mobile phones, viewport size changes dynamically to show browser toolbars.

Large viewport units

lvw lvh lvmax lvmin

like vw vh, but value include the spaces that are taken by browser toolbars.

vw vh are defined to be equivalent to lvw lvh .

Small viewport units

svw svh svmax svmin

like vw vh, but do not include spaces taken by browser toolbars.

Dynamic viewport units

dvw dvh dvmax dvmin

value is the large or the small version of viewport, depending if browser toolbars are shown or hidden.

🛑 WARNING: if you use dynamic viewport size, your element may resize when user scroll.

Viewport unit based on writing direction (horizontal or vertical)

vi

1% of the inline axis of the viewport.

• when in horizontal writing mode (such as English), same as vw
• when in vertical writing mode (Chinese, sometimes), same as vh

vb

1% of the block axis of the viewport.

• when in horizontal writing mode (such as English), same as vh
• when in vertical writing mode (Chinese, sometimes), same as vw