lvmin
A hundredth of the shorter side with browser toolbars retracted.
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 1lvmin = 1% of min(lvw, lvh)
How it works
1lvmin is 1% of the smaller of lvw and lvh. In an upright window that is the width. In a window wider than tall it is the large height, the largest the short side ever gets. The large reading is never smaller than the small one, so lvmin is at least as big as svmin.
A badge or dial at 10lvmin is as big as it will ever become, which makes it the value to check a design against for overflow. The size does not change when the toolbars appear, only the visible area around it does, so while they are showing the shape can look large for the screen. Measured in a 1280 by 800 window, 10lvmin gives 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 badge or dial checked against the largest size it can reach.
Watch out
lvmin ignores the toolbars: it is the same whether they are shown or hidden. In a window wider than tall it is the large height, so a square of 100lvmin is taller than the visible area while the toolbars are shown.
.badge {
inline-size: 40lvmin;
aspect-ratio: 1;
}