Learn All 24 "CSS Viewport" Units💫

You've probably heard of the different units used in CSS, but you may not have understood them all — or at least one. This is where I come in. In this post I'll explain all 24 CSS viewport units and their specific uses.

There are six different viewport units in CSS with three unique modifiers giving us 24 combinations. These viewport units can specify lengths as a proportion of the viewport size.

Main four viewport units

The central CSS viewport units are vw, vh, vmin, and vmax. Chances are you know these units as developers widely use them, so I will try to be as brief as possible when explaining them.

vw

vw stands for viewport width. It is a unit of measurement that refers to the width of the viewport, or the visible area of a web page. One vw is equal to 1% of the viewport width.

For example, if you have a div element with a width of 50vw, this means that the div will be 50% of the width of the viewport. If the viewport is 1000 pixels wide, the div will be 500 pixels wide.

Here's an example of how you can use vw in CSS:

.my-div {
  width: 50vw;
}

vh

In addition to vw, you can also use vh, which stands for viewport height, to specify sizes based on the height of the viewport. One vh is equal to 1% of the viewport height.

For example:

.my-div {
  height: 10vh;
}

If your viewport height is 300px then this will set the height of the element with the class "my-div" to 30px.

vmin and vmax

vmin stands for viewport minimum and vmax stands for viewport maximum. These are units of measurement that refer to the smaller or larger dimension of the viewport, respectively.

One vmin is equal to 1% of the smaller dimension of the viewport (either the width or the height, whichever is smaller). One vmax is equal to 1% of the larger dimension of the viewport (either the width or the height, whichever is larger).

For example, if you have a div element with a width of 50vmin, this means that the div will be 50% of the smaller dimension of the viewport. If the viewport is 1000 pixels wide and 600 pixels tall, the div will be 300 pixels wide (50% of the smaller dimension, which is the height).

Here's an example of how you can use vmin in CSS:

.my-div {
  width: 50vmin;
}

Similarly, you can use vmax to specify sizes based on the larger dimension of the viewport.

For example:

.my-div {
  width: 75vmax;
}

This will set the width of the element with the class "my-div" to 75% of the larger dimension of the viewport.

Two New Viewport Units in CSS

Apart from the above four units, CSS now defines two other viewport units: vi and vb. The main reason for this change is to make adopting different writing directions in the code easier. For example, your entire application changes direction from horizontal to vertical writing orientation. In that case, the idea of ​​top/bottom or width/height doesn't necessarily mean the same. Because if you want to add padding top and bottom of your text, This will be seen as left and right padding in vertical writing systems rather than top and bottom padding. That's the reason CSS added vi and vb viewport units.

vi

vi stands for Viewport Inline, 1% of the viewport’s size in the inline direction. vi represents the inline direction of your document. A horizontal writing direction corresponds with the width of your viewport, and a vertical writing direction represents the height of your viewport. The easy way to remember the approach is that it is in the same direction as your text.

Here is an example:

.horizontal__direction {
  writing-mode: horizontal-tb;
  width: 30vi; /* Equals to 30vw */
}

.vertical__direction {
  writing-mode: vertical-lr;
  height: 30vi; /* Equals to 30vh */
}

vb

vb is the opposite of vi and stands for Viewport Block, 1% of the viewport’s size in the block direction. In a horizontal writing direction, vi will correspond with the viewport height, and in a vertical document, this will represent the width of your viewport. An easy to remember this unit is to remember that the block direction will always be the direction block elements (two divs) stack on top of one another.

Here is an example:

.horizontal__direction {
  writing-mode: horizontal-tb;
  height: 30vb; /* Equals to 30vh */
}

.vertical__direction {
  writing-mode: vertical-lr;
  width: 30vb; /* Equals to 30vw */
}

Viewport Unit Modifiers

Till now, I have explained the six main types of viewport units, but you can add three different modifiers to these units to make them behave differently when your viewport is resizable.

These modifiers are s, l, and d. To use a modifier, you have to put the modifier after the number and before the unit, eg 10svw, giving us a total of four combinations for each of the six viewport units. vh, svh, lvh, and dvh.

If you don't use a unit modifier, such as 10vw or 10vh, the browser automatically defaults to one of the three modifiers depending on the browser implementation.

s modifier

The s modifier stands for Small and represents the smallest possible viewport. For example, when you browse the web on your phone, you may notice that the header part, where the URL and menu option lies, disappears when you scroll down. This happens because your viewport technically changed size since the header is no longer taking up part of your viewport.
For example, setting an element to 100svh would take up 100% of the screen's height based on the screen's size when the header is shown. It does not matter if the header is visible or not. This unit will always base its size on what the viewport would be if the header is showing.

l modifier

The l modifier stands for Large and represents the largest possible viewport. You can think of l modifier as the opposite of the s modifier. In our mobile phone example this would be the size of the viewport when the header is NOT shown. For example, setting an element to 100lvh would take up 100% of the screen's height based on the screen's size when the header is not shown.

d modifier

The d modifier stands for Dynamic and represents the current viewport size, precisely like a mixer of the s and l modifiers. In our mobile phone example, this would always be the size of the current viewport, no matter if the header is showing or not. If our URL bar is showing, then the d modifier is the same size as the s modifier, and if the header is NOT showing, the d modifier is the same size as the l modifier.

Conclusion

You might find these 24 units confusing and a lot, but it is just six units with three relatively simple modifiers. And most of the time, you will always use the first four units that I have explained(vw, vh, vmin, vmax). And the rest of the units are still in the draft stage, which means they still need to be officially.

Visit:
👨‍💻My Portfolio
🏞️My Fiverr
🌉My Github
🧙‍♂️My LinkedIn