vw
1% of the viewport's width.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 20+ |
| Chrome Android | 25+ |
| Edge | 12+ |
| Firefox | 19+ |
| Firefox Android | 19+ |
| Safari | 6+ |
| Safari iOS | 6+ |
Formula 1vw = 1/100 of the viewport width
How it works
1vw is a hundredth of the viewport width, so 50vw is half the window. In a window 1280px wide, 10vw is 128px, and the number follows every resize.
100vw is the whole width of the window, including the room a classic scrollbar takes, while the room left for the page is narrower. In Chromium on Linux, whose scrollbar is 15px wide, 100vw measured 1280px and the room 1265px, and a block set to inline-size: 100vw made the page scroll sideways. A block-level element with inline-size: auto fits the room exactly. Overlay scrollbars take no room, so with them 100vw and the room are the same and the bug stays hidden until the page meets a classic scrollbar. One exception is in the specification: when the root element has overflow: scroll, the scrollbar is assumed to be present and 100vw shrinks to the room. Chromium does the same.
Text sized in vw alone does not follow page zoom. Zoom makes the CSS pixel larger on screen, which leaves fewer CSS pixels in the window, so font-size: 4vw shrinks by the factor zoom adds and the text stays the same size on screen. A rem term brings back only part of it: with the window halved to imitate 200% zoom, calc(1rem + 2vw) came out 1.4 times larger on screen, not 2 times. WCAG 1.4.4 asks for text that can be enlarged to 200%, so test the formula you ship at that zoom.
Try it
Viewport units for a window of your choice
Enter a window size, or take the one you have. Ten of each unit comes out as a tenth of the width, the height, the shorter side or the longer one.
10vw- 128px
10vh- 80px
10vmin- 80px
10vmax- 128px
On a desktop window svh, lvh and dvh give the same numbers as vh. They differ only while a phone browser shows or hides its toolbars, which this page cannot show.
The same as a table
| Unit | Laptop, 1280 by 800 | Phone, 390 by 844 |
|---|---|---|
10vw | 128px | 39px |
10vh | 80px | 84.4px |
10vmin | 80px | 39px |
10vmax | 128px | 84.4px |
What changes it
- Moves with
- the window size
- Stays put under
- the reader's text size
- page zoom
- the font in use
- the query container
- phone toolbars
- the writing mode
Reach for it when
Fluid type with a rem term inside clamp(), and full-bleed bands that ignore their parent.
Watch out
100vw includes the room a classic vertical scrollbar takes, so a block of that width is wider than the room left and the page scrolls sideways. Overlay scrollbars take no room, so the bug can hide on one machine and show on another.
Before
h1 {
font-size: 4vw;
}After
h1 {
font-size: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}