Learn All 24 "CSS Viewport" Units💫
Tags: webdev, programming, css, beginners
Published: 2023-05-16 16:16:31

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:

```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:

```css
.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:

```css
.my-div {
  width: 50vmin;
}
```
Similarly, you can use vmax to specify sizes based on the larger dimension of the viewport.

For example:

```css
.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:

```css
.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:

```css
.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](https://portfolio-khaki-iota-89.vercel.app/)
🏞️[My Fiverr](https://www.fiverr.com/sunnyislam990)
🌉[My Github](https://github.com/arafat4693)
🧙‍♂️[My LinkedIn](https://www.linkedin.com/in/arafat-freelancer)