dvw
A hundredth of the visible width, as it is at this moment.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 108+ |
| Chrome Android | 108+ |
| Edge | 108+ |
| Firefox | 101+ |
| Firefox Android | 101+ |
| Safari | 15.4+ |
| Safari iOS | 15.4+ |
Formula 1dvw = 1/100 of the current visible width
How it works
1dvw is the dynamic viewport’s width divided by 100: the width of the window as it is at this moment. A toolbar along the top or bottom edge takes height, not width, so dvw is expected to match vw. In a desktop window it does: 10dvw is 128px in a window 1280px wide.
Choose it when an expression also contains dvh, for instance min(100dvw, 100dvh * 1.5), so that the whole formula speaks about the same moment. By definition the values of the dynamic family follow the visible size as it changes, and anything sized with them changes along with it.
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
Keeping both axes in the dynamic family when a formula also holds dvh.
Watch out
Choosing it for a width is not expected to change anything. The toolbar problem lives in the height, so dvh is where this family matters.
.panel {
inline-size: 80dvw;
block-size: 80dvh;
}