dvmin
A hundredth of the shorter side that is visible right now.
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 1dvmin = 1% of min(dvw, dvh)
How it works
1dvmin is 1% of the smaller of dvw and dvh, evaluated at this moment. With the window upright the width is the shorter side and the value holds steady. Wider than tall, the smaller side is the height, and the value moves as the toolbars show and hide.
A round record button at 20dvmin keeps its size in a tall window and changes with the toolbars in a wide one. If the shape must not move at all, svmin holds still, because the small viewport does not change, and it is never larger than dvmin. Pick dvmin when matching the visible area at every moment matters more than stability. In a 1280 by 800 desktop window 10dvmin is also 80px.
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
- phone toolbars
- Stays put under
- the reader's text size
- page zoom
- the font in use
- the query container
- the writing mode
Reach for it when
A shape that must fit the visible area at each moment.
Watch out
In a window wider than tall dvmin is the dynamic height, so it moves whenever the toolbars show or hide.
.dial {
inline-size: 60dvmin;
aspect-ratio: 1;
}