vh & vw
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 were 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?
🤔
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.
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?
Surprise!
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 we know what they mean and how do we use them?
Using Viewport Units
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 its 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).
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 one, 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 withvh 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.