CSS Viewport Units Tutorial – vw, vh, vmin, vmax, svw, lvh, dvh & More Explained

INTRODUCTION

Viewport is the area of window in which webpage is currently seen. In terms of web-browser, it is same as browser window and excludes menu bar etc. Its size varies with device, mode and orientation. In CSS there are 6 units based on viewport which are listed below.

• viewport width unit - vw
• viewport height unit - vh
• viewport block unit - vb
• viewport inline unit - vi
• viewport minimum unit - vmin
• viewport maximum unit - vmax

1. viewport width unit - vw

VW stands for Viewport width. It is an unit to measure the width of viewport. VW is equivalent to percentage of viewport width. So 10vw is equal to 10% of viewport width and 100vw is full width of viewport.

Example: consider viewport dimensions as 1920px x 1080px. So 10vw is calculated as 10% of 1920 which is equal to 192px.

2. viewport height unit - vh

VW stands for Viewport height. It is an unit to measure the height of viewport. VW is equivalent to percentage of viewport height. So 10vh is equal to 10% of viewport height and 100vh is full height of viewport.

For example consider viewport dimensions as 1920px x 1080px. So 10vh is calculated as 10% of 1080 which is equal to 108px.

3. viewport minimum unit - vmin

vmin stands for viewport minimum. This unit refers to dimension of viewport which is smaller(either height or width). 10vmin is equal to 10% of smaller dimension of viewport and 100vmin is full size of it.

Example: consider viewport dimensions as 1920px x 1080px. So vmin here will refer to 1080px and 10vmin is calculated as 10% of 1080 which is equal to 108px.

4. viewport maximum unit - vmax

vmax stands for viewport maximum. This unit refers to dimension of viewport which is larger(either height or width). 10vmax is equal to 10% of Larger dimension of viewport and 100vmin is full size of it.

For example consider viewport dimensions as 1920px x 1080px. So vmax here will refer to 1920px and 10vmax is calculated as 10% of 1920 which is equal to 192px.

Block And Inline Axis

Not all language in world starts at left side of line. Each language has has its own direction of text flow. For example Arabic languages are right-to-left in direction. Chinese or japanese Languages are written from top-to-bottom with new line added to left. To incorprate all these writing modes, CSS introduced two new properties vi and vb which depend on Inline and Block Axis.

Inline Axis is parallel to the flow of text. It is horizontal axis for horizontal witing modes and vertical for vertical witing modes. For example it is horizontal axis for English Language.

Block Axis is perpendicular to the flow of text. It is vertical axis for horizontal witing modes and horizontal for vertical witing modes. For example it is vertical axis for English Language.

6. viewport inline unit - vi

vi stands for Viewport Inline. It has the same direction as Inline Axis. For horizontal writing mode it corresponds to width and for vertical writing mode it corresponds to height of viewport. 1vi is 1% of viewport size along inline axis.

7. viewport block unit - vb

vb stands for Viewport Block. It has the same direction as Block Axis. For horizontal writing mode it corresponds to height and for vertical writing mode it corresponds to width of viewport. 1vb is 1% of viewport size along block axis.

Viewport Unit Modifiers

All the above Viewport units works perfectly for desktop computers, but presents challenges on mobile devices. The viewport of mobiles changes due to the presence of scrollable toolbars. These toolbar generally consists of address bar, navigation bar and other. They contracts and expands on scrolling based on user input.

To overcome this problem, the various states of the viewport has been defined/specified and new units have been created based on these new viewport states. These new states and corresponding new units are listed below.

• Large Viewport - lvw, lvh, lvmin, lvmax, lvi, lvb
• Small Viewport - svw, svh, svmin, svmax, svi, svb
• Dynamic Viewport - dvw, dvh, dvmin, dvmax, dvi, dvb

Large Viewport

Large Viewport is a state when all toolbars are contracted to their fullest extent. So the maximum screen area becomes available for page content.

The Large Viewport units allows developer to size an element by full viewport area. These units have the lv prefix followed by the six viewport units which we had seen earlier. The units are lvw, lvh, lvmin, lvmax, lvi, lvb. These units are described briefly in the below table.

Small Viewport

Small Viewport is a state when all toolbars are expanded to their fullest extent. So the minimum screen area becomes available for page content.

The Small Viewport units allows developer to size an element in accordance to smallest viewport area. These units have sv prefix. The units are svw, svh, svmin, svmax, svi, svb. These units are described briefly in the below table.

Dynamic Viewport

Dynamic Viewport is a state which is compatible with changes in the viewport. It adjusts itself according to UI changes by equating itself to current viewport.

• When all toolbars are expanded and viewport becomes smallest possible, then Dynamic Viewport becomes equal to size of Small viewport
• When all toolbars are contracted and viewport becomes largest possible, then Dynamic Viewport becomes equal to size of large viewport

Dynamic Viewport units allows developer to set lenghts according to the size of viewport in every state. These units have dv prefix. The units are dvw, dvh, dvmin, dvmax, dvi, dvb.

Frequently Asked Questions (FAQ)

.container {
  width: calc(100vw - 15px); /* adjust scrollbar width as needed */
}

.container {
  width: 100vw;
  max-width: 100%;
  box-sizing: border-box;
}

const width = window.innerWidth;
const height = window.innerHeight;

console.log(`Viewport size: ${width} × ${height}`);

.fullscreen {
  height: 100vh;
}

.fullscreen {
  height: 100dvh;
}