svmin
A hundredth of the shorter side with browser toolbars shown.
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 1svmin = 1% of min(svw, svh)
How it works
1svmin is 1% of the smaller of svw and svh. In a window taller than it is wide, the width is the shorter side and svmin equals lvmin. In a window wider than tall the shorter side is the height, and the small height is the one that leaves room for the toolbars, so svmin sits below lvmin by what the toolbars take. If the toolbars take only height, the tall window never feels them. This is the definition, and no phone has been used to check it.
A square sized at 100svmin is the biggest one that fits the small viewport, so it fits however the toolbars sit. Pick it over vmin when a shape must fit with every toolbar showing and you accept a margin once they retract. At 1280 by 800 on a desktop, 10svmin comes to 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
- 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 shape that fits the screen with every toolbar showing.
Watch out
svmin differs from vmin only in a window wider than tall. There the shorter side is the height, and the small height sits below the large one that plain vmin follows.
.dial {
inline-size: 70svmin;
aspect-ratio: 1;
}