Viewport units
The vw, vh, vmin, and vmax CSS viewport units are relative to the size of the viewport, and are used to size elements in relation to the viewport's dimensions.
Overview
The vw, vh, vmin, and vmax CSS viewport units are relative to the size of the viewport, and are used to size elements in relation to the viewport's dimensions.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.types.length.vh | 20 | 12 | 19 | 6 | 25 | 6 |
| CSS type | ||||||
vmax `vmax` unit | 26 | 16 | 19 | 7 | 26 | 7 |
vmin `vmin` unit | 26 | 12 | 19 | 7 | 26 | 7 |
vw `vw` unit | 20 | 12 | 19 | 6 | 25 | 6 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
- Starting with version 21, viewport-percentage lengths are invalid in `@page`.
Notes 1 item(s)
Implementation note
- Starting with version 21, viewport-percentage lengths are invalid in `@page`.
Notes 1 item(s)
Implementation note
- Previously available under a different name: vm (12)
Notes 1 item(s)
Implementation note
- Starting with version 21, viewport-percentage lengths are invalid in `@page`.
Notes 1 item(s)
Implementation note
- Starting with version 21, viewport-percentage lengths are invalid in `@page`.
Syntax
CSS
.hero {
height: 100vh;
width: 100vw;
}
.responsive-text {
font-size: 5vmin;
}
.square {
width: 50vmin;
height: 50vmin;
}Live demo
Use cases
Using Viewport units
The vw, vh, vmin, and vmax CSS viewport units are relative to the size of the viewport, and are used to size elements in relation to the viewport's dimensions.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features