lvi
One percent of the large viewport, measured along the line direction.
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 1lvi = 1/100 of the large viewport in the inline direction
How it works
1lvi is the large viewport measured along the inline axis, which is lvw for horizontal text. Spelled this way, a declaration says that the length along the lines is meant, whichever way the lines run, instead of a width of the screen.
Together with lvb it describes a full-bleed rectangle without naming a physical side. Like the other logical viewport units it has the open question of vi: MDN and the table in the specification read the axis off the root, while the definition and Chromium read it off the element. The card’s example, 100lvi in a vertical document, measured 800px, the height of the window. It is a unit for shared components, and on a single-direction site it can be written lvw.
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
- the writing mode
- Stays put under
- the reader's text size
- page zoom
- the font in use
- the query container
- phone toolbars
Reach for it when
A full-bleed length along the lines, for components shared between writing modes.
Watch out
Its axis follows the writing-mode of the root in MDN and of the element in the definition and in the three engines measured for vi. A column of 100lvi is as tall as the large viewport, so while the toolbars are shown it runs under them.
html {
writing-mode: vertical-rl;
}
.column {
inline-size: 100lvi;
}