vh and vw units
Tags: html, css, frontend, beginners
Published: 2020-08-02 03:31:22

---
title: vh and vw units
published: true
date: 2020-07-25 19:29:03 UTC
tags: html, css, frontend, beginners
canonical_url: https://shannoncrabill.com/blog/vh-and-vw-units/
---

If you are like me, you probably peek at the source code of a website on occasion. I do this when I’m curious about how a page is organized, if a framework is used or if I’m curious how an element was styled with CSS.

Recently, I’ve noticed the values `vh` or `vw` used for sizing. As someone who defaults to `px` or `%` values when quickly spinning up a project, `vh` and `vw` not ones I was familiar with. So I decided to do some digging to figure out what they are, how they work, and how to start using them in my projects.

First, what does that `v` stand for?

![🤔](https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f914.png)

## V is for Viewport

It turns out the `v` stands for `viewport`. A viewport, in web design, is the area of a webpage or app that is currently visible on a device to the user. You may think that a viewport is the same as the total length and/or width of a website, but this is not the case.

Imagine a newspaper on your doorstep. It's most likely folded in half or into quarters. If it’s folded into quarters, what you see—the portion of the page that is facing upwards—represents part of the whole newspaper. Folded underneath the portion that you see are other pages of the same newspaper.

![Folded newspaper on table with coffee and pastry](https://dev-to-uploads.s3.amazonaws.com/i/cz1bre0ccl8nhzakw8ya.jpg)
	
In this example, the part of the folded newspaper that you initially see is like the viewport. The viewport is smaller than the whole newspaper, so you are only seeing a part of the whole thing. To see the rest of the newspaper, you need to unfold it, essentially making your viewport larger so that you can see more of the newspaper at once.

While the concept of a fold in web design is debatable, a similar principle applies. Let’s say, you’re on the content-heavy homepage of a newspaper. If you are browsing with a mobile device, most likely, not all of the content is visible on a small screen at once. A user has to scroll through the content, moving a new section of the homepage into the viewport, the visible area, a little at a time. The images, text, and other elements of the webpage may total 1000’s of pixels in length while your mobile viewport is likely to be a fraction of that.

So, the `v` stands for viewport, what about those other letters?

The `h` and `w` in `vh` and `vw` stand for height and width respectively. Putting all of that together we have `vh` for viewport height and `vw` for viewport width. Cool!

Now, that do they mean and how do we use them?

`vh` and `vw` are _relative_ units introduced in CSS3. A single (one) `vh` or `vw` represents a percentage of that device’s viewport height or width. Using a mobile phone an example, if it has a viewport width of `450px`, half of that width could be specified as `50vw` which equals 225px. To style an element as `225px` wide on a desktop computer with a viewport width of `900px`, we would specify it as `25vw` in the CSS.

Ok, now that we know `vh` and `vw` units whose values are defined by the viewport, why not use `%`?

## Percent vs Viewport Height & Width

While it is accurate that `vh`/`vw` and `%` are relative units the _scope_ of what the end values are relative to are different. In the case of `%` the value is _relative to it’s parent element_. With `vh`/`vw` the value is always relative to the device viewport. Let’s make a quick example.

Let’s say we want an element to display as half the width of the viewport. Within that element, we want a child element that is half as wide as the parent (which is half as wide as its parent, the document/viewport).

{% codepen https://codepen.io/scrabill/pen/abdxNOO %}
	
For each section element, setting the width property to `50%` or `50vw` produces the same visual result. For the child aside element, the width values are different.
	
In example 1, the `aside` is half as wide as its parent element, which is half as wide as its parent element. Visually, this is what we want. In example 2, specifying the child element as `50vw` fills the width of its parent element, which is half as wide as the viewport. To get the half-width, child element like in the first example, using `vw`, it would need a value of `25vw` like in the 3rd example.

## Summary

Overall, the key to working `vh` and `vw` is that they stay relative to the viewport dimension of the device the user is using. In the case of a mobile or tablet device, the viewport width and height stays consistent. On a desktop browser, the viewport dimensions will change if the browser window is resized, made full screen or pinned to one side or another.

## Resources

- https://css-tricks.com/fun-viewport-units/
- https://piccalil.li/quick-tip/a-safer-way-to-vertically-fill-the-viewport/
- https://caniuse.com/#feat=viewport-units
- https://moderncss.dev/generating-font-size-css-rules-and-creating-a-fluid-type-scale/
- https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS

The post [vh and vw units](https://shannoncrabill.com/blog/vh-and-vw-units/) appeared first on [Shannon Crabill — Software Engineer && Email Developer](https://shannoncrabill.com/blog).