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
vw used for sizing. As someone who defaults to
% values when quickly spinning up a project,
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.
v stands for viewport, what about those other letters?
vw stand for
width respectively. Putting all of that together we have
viewport height and
viewport width. Cool!
Now, that we know what they mean and how do we use them?
Using Viewport Units
vw are relative units introduced in CSS3. A single (one)
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
vw units whose values are defined by the viewport, why not use
Percent vs Viewport Height & Width
While it is accurate that
% 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
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).
section element, setting the
width property to
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.
See the Pen Percent vs Viewport Width Example by Shannon Crabill (@scrabill) on CodePen.
Overall, the key to working
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.