A Beginner’s Guide to CSS Viewport Units: vw, vh, vmin, vmax
Have you ever wondered how to make your website look great on any device? Well, viewport units might be the solution you’re looking for! Viewport units, also known as viewport-percentage lengths, are responsive CSS units that allow you to define dimensions based on the width or length of the viewport. In simpler terms, viewport units help you create web designs that adapt to different screen sizes automatically.
When it comes to responsive design, percentages can sometimes be tricky to work with. Luckily, we have viewport units! These powerful units let us define dimensions based on the percentage of the viewport’s width (vw) or height (vh). So, instead of struggling with percentages that might not always behave how we want them to, we can use vw and vh to achieve the same responsive effect with ease.
The viewport is the area of the web page that is visible to the user, and it changes based on the size of the device’s screen. By using viewport units, we can ensure that our website elements will always fit perfectly, no matter the screen size. Isn’t that amazing?
Contents
What are vh and vw?
W3C says that the viewport is the size of the initial containing block. In simpler terms, the viewport is the area within the browser window or any other viewing area on a screen.
The vw and vh units represent the percentage of the width and height of the actual viewport. They can be any value between 0 and 100, following these rules:
– 100vw = 100% of the viewport width
– 1vw = 1% of the viewport width
– 100vh = 100% of the viewport height
– 1vh = 1% of the viewport height
Now, let’s talk about the differences between viewport units and percentage units.
So, what makes viewport units different from percentage units? Well, percentage units actually inherit the size of their parent element, while viewport units do not. Viewport units are always calculated as a percentage of the viewport size. This means that an element defined using viewport units can be larger than its parent.
Let’s take a look at an example: Full-screen sections
Full-screen sections are probably the most well-known examples of using viewport units.
Creating full-screen sections is actually quite simple. We just need to stack three sections on top of each other and make sure that each section covers the entire screen, but doesn’t go beyond it.
When working with CSS, we typically set the height of an element using the “vh” unit, which represents a percentage of the viewport height. Similarly, we use “100%” to set the width, as this ensures the element spans the entire width of the viewport. However, we avoid using the “vw” unit in this case because it includes the width of any scrollbars that may be present in the viewport. If we were to use “100vw” for the width, a horizontal scrollbar would appear at the bottom of the browser window, which is not ideal.
To illustrate this concept, let’s consider an example. We have three sections in our webpage, each with a full-screen background image. We set the height of these sections using the “100vh” property, meaning they will cover the entire vertical height of the viewport. The width is set to “100%”, ensuring they stretch across the whole width of the viewport.
Here’s the CSS code for our example:
* {
margin: 0;
padding: 0;
}
section {
background-size: cover;
background-position: center;
width: 100%;
height: 100vh;
}
.section-1 {
background-image: url(‘https://assets.usamerica.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg’);
}
.section-2 {
background-image: url(‘https://assets.usamerica.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg’);
}
.section-3 {
background-image: url(‘https://assets.usamerica.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg’);
}
By using these CSS properties, we can create visually appealing sections that fill the entire viewport, without any horizontal scrollbars interfering with the display.
When you look at the gif demo below, you’ll notice that vh is truly a responsive unit.
According to the W3C docs, if you’re dealing with a horizontal scrollbar issue, you can solve it by adding the overflow: auto; rule to the root element. But here’s the thing: this solution only works partially. While the horizontal scrollbar disappears, the width is still calculated based on the viewport width, which includes the sidebar. As a result, the elements end up being slightly larger than they should be.
If you ask me, I wouldn’t risk using the vw unit to size full-screen elements because of this issue. Plus, we don’t even need it since the width: 100%; rule works perfectly fine. The real challenge with fullscreen layouts has always been finding the right height value, and that’s where the vh unit comes in handy.
More ways to use vw and vh
If you’re curious about other ways to use vw and vh, Lullabot has a fantastic article that showcases several real-life examples (complete with Codepen demos). Here are a few examples:
- Creating cards with fixed ratios
- Making an element shorter than the screen
- Scalable text
- Breaking out of a container
If you want to learn how to use the vw unit for responsive typography, Opera.dev has a helpful tutorial.
Not only can you use viewport units for width and height, but you can also use them for other properties. For example, you can use vw and vh units to define the size of paddings and margins as well.
Viewport min (vmin) & viewport max (vmax)
The vmin and vmax units let you access the size of the smaller or larger side of the viewport. Here’s how they work:
– 100vmin is equal to 100vw or 100vh, depending on which is smaller.
– 1vmin is equal to 1vw or 1vh, depending on which is smaller.
– 100vmax is equal to 100vw or 100vh, depending on which is larger.
– 1vmax is equal to 1vw or 1vh, depending on which is larger.
In a portrait orientation, the viewport is smaller horizontally than vertically. That’s why 100vmin is the same as 100vw, and 100vmax is the same as 100vh.
In a landscape orientation, the viewport is smaller vertically than horizontally. So, 100vmin is equal to 100vh, and 100vmax is equal to 100vw.
Here’s an example to help you understand: Let’s say you want to make your hero texts readable on every screen. You can use the vmin and vmax units to ensure that the text is scaled properly based on the viewport size. This way, your hero texts will look great on any device, whether it’s a phone, tablet, or desktop.
The vmin and vmax units are not as well-known as vw and vh, but they can be a great alternative to orientation @media queries. They come in handy when you have elements that might look strange at different aspect ratios.
The New Code has a helpful tutorial on how to make hero text readable on any screen by using the vmin unit. Hero texts often end up being too small on mobile and too big on large monitors.
Here’s the main idea of their solution:
In the Codepen demo, you can see how vmin solves the problem of making hero text legible. Just open the demo in “Full Page” mode and resize your browser window horizontally and vertically to see how the hero text adjusts.
Browser support for viewport units is generally good, as shown in the CanIUse chart below. However, it’s worth noting that some versions of IE and Edge don’t support vmax. Additionally, iOS 6 and 7 had a problem with the vh unit, which was fixed in iOS 8.
