vmin
A hundredth of the shorter side of the window.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 26+ |
| Chrome Android | 26+ |
| Edge | 12+ |
| Firefox | 19+ |
| Firefox Android | 19+ |
| Safari | 7+ |
| Safari iOS | 7+ |
Formula 1vmin = 1% of min(viewport width, viewport height)
How it works
1vmin is 1% of the smaller side of the window, whichever side that is. In a window 1280px wide and 800px tall, 10vmin is 80px, and it comes from the height. Narrow the window to 600px and the same declaration yields 60px, now from the width. Widen it instead, to 2560px, and nothing changes: only the shorter side counts.
That makes it the unit for shapes that must fit the window. A dial, a logo plate or a square thumbnail at inline-size: 70vmin; aspect-ratio: 1 is never larger than the window in either direction, whatever shape the window has.
On a wide, short window vmin is the height, so a heading at 4vmin is 32px in a window 800px tall at any width, where 4vw reaches 102px at 2560px wide. The unit does not follow zoom: halving the window to imitate 200% zoom halves 4vmin too, so the text stays the same size on screen. Keep a rem term in the formula, as with vw.
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
A square or circle that must fit the window whichever way it is turned.
Watch out
A window can get wider without changing the value: 10vmin stays 80px from 1000px to 2560px wide at 800px tall, because only the shorter side counts.
Before
.dial {
inline-size: 70vw;
aspect-ratio: 1;
}After
.dial {
inline-size: 70vmin;
aspect-ratio: 1;
}