Hey guys! Let's dive into the world of CSS and explore some cool units that will help you create responsive and dynamic layouts: vh, dvh, lvh, svh, and vw. These units are all about sizing elements relative to the viewport, but they each have their own nuances. So, buckle up, and let’s get started!

What are Viewport Units?

Viewport units in CSS are relative length units based on the dimensions of the browser's viewport. The viewport is the visible area of the webpage, and these units allow you to size elements as a percentage of that area. This makes them incredibly useful for creating layouts that adapt to different screen sizes and orientations. The main viewport units we'll be looking at are:

• vw: Viewport Width
• vh: Viewport Height
• svh: Small Viewport Height
• lvh: Large Viewport Height
• dvh: Dynamic Viewport Height

Viewport Width (vw)

Let's start with vw, which stands for viewport width. This unit represents 1% of the viewport's width. So, if your viewport is 1000 pixels wide, 1vw would be equal to 10 pixels. Using vw is super handy for creating elements that scale proportionally with the screen width. For example, you might want a header to always take up 100% of the screen width, no matter the device. Setting the width of the header to 100vw ensures it stretches across the entire viewport.

When should you use vw? Well, think about scenarios where you want elements to maintain a consistent proportion relative to the screen's width. Maybe you have a full-width image slider, a responsive navigation bar, or a grid layout that needs to adapt fluidly. Using vw ensures that these elements scale correctly, providing a better user experience across different devices. For instance, if you have a container that you want to always take up half the screen's width, you would set its width to 50vw. As the screen size changes, the container will automatically adjust its width to remain at 50% of the viewport.

Moreover, vw units can be incredibly useful when dealing with typography. You can set the font-size of an element using vw, ensuring that the text scales with the screen width. This can improve readability on smaller screens, where text might otherwise appear too small. However, it’s important to be mindful of extreme cases, such as very large screens where the text might become excessively large. In such situations, you might want to combine vw with clamp() to set a maximum font size.

In summary, the vw unit is a powerful tool for creating responsive layouts that adapt to different screen widths. By sizing elements as a percentage of the viewport's width, you can ensure that your designs look great on any device. Just remember to consider how elements will scale on both small and large screens to provide the best possible user experience.

Viewport Height (vh)

Next up is vh, which represents viewport height. Similar to vw, vh is a percentage-based unit, but instead of the width, it refers to the height of the viewport. So, 1vh is equal to 1% of the viewport's height. If your viewport is 800 pixels tall, 1vh would be 8 pixels. The vh unit is perfect for creating full-screen layouts or sections that always take up a specific portion of the screen height.

Consider a landing page with a hero section that you want to always fill the entire screen. By setting the height of the hero section to 100vh, you ensure that it covers the full viewport height, regardless of the device. This creates an immersive experience for the user, drawing their attention to the key content immediately. Another common use case is creating a fixed sidebar that spans the entire height of the screen. Using vh ensures that the sidebar always extends from the top to the bottom of the viewport, even if the content inside the sidebar is shorter than the screen height.

vh can also be used to control the vertical spacing between elements. For example, if you want to create a consistent gap between sections on a page, you can use vh units for the margin-top or margin-bottom properties. This ensures that the spacing remains proportional to the screen height, providing a visually balanced layout. Additionally, vh can be combined with other units like px or em to create more complex and flexible designs.

However, be aware that vh can sometimes lead to unexpected results on mobile devices, especially when the address bar is visible. The address bar can reduce the available viewport height, causing elements sized with vh to overflow or appear incorrectly. This is where the dynamic viewport units like dvh come into play, which we'll discuss later. Despite this caveat, vh remains an essential tool for creating responsive and visually appealing layouts, especially when used thoughtfully and in combination with other CSS techniques.

Small Viewport Height (svh)

Now, let's talk about svh, which stands for small viewport height. This unit is part of the newer viewport units designed to address some of the issues with vh on mobile devices. Specifically, svh represents 1% of the smallest possible viewport size. The “smallest possible” viewport refers to the size when all browser UI elements, like the address bar and navigation bars, are visible.

The main problem with vh is that on mobile devices, the address bar can appear and disappear as the user scrolls, changing the actual height of the viewport. This can cause elements sized with vh to jump or resize unexpectedly, leading to a jarring user experience. The svh unit solves this issue by using the smallest possible viewport height as its reference. This means that elements sized with svh will not change size when the address bar appears or disappears, providing a more stable and consistent layout.

For example, if you have a full-screen hero section that you want to always cover the visible area without any resizing, you can set its height to 100svh. This ensures that the hero section will always fit within the smallest possible viewport, even when the address bar is visible. Similarly, you can use svh to create consistent vertical spacing between elements, ensuring that the spacing remains stable regardless of the browser UI elements.

It’s important to note that support for svh is not yet universal across all browsers. However, as more browsers adopt the newer viewport units, svh will become an increasingly valuable tool for creating responsive mobile layouts. In the meantime, you can use feature queries to provide fallback values for older browsers that do not support svh. This ensures that your designs will still look good on older devices while taking advantage of the benefits of svh on newer ones.

Large Viewport Height (lvh)

Moving on to lvh, which stands for large viewport height. Like svh, lvh is designed to address the issues with vh on mobile devices, but it takes the opposite approach. Instead of using the smallest possible viewport height, lvh represents 1% of the largest possible viewport size. The “largest possible” viewport refers to the size when all browser UI elements, like the address bar and navigation bars, are hidden.

The lvh unit is useful when you want elements to take up the maximum possible screen space, even when the address bar is hidden. This can be particularly useful for creating immersive experiences, such as full-screen image galleries or video players. By setting the height of these elements to 100lvh, you ensure that they will always fill the entire screen when the address bar is not visible.

However, it’s important to be cautious when using lvh, as it can lead to elements overflowing the viewport when the address bar is visible. This is because lvh assumes that the entire screen is available, which may not always be the case. To avoid this issue, you can use feature queries to provide fallback values for browsers that do not support lvh, or combine lvh with other units and CSS techniques to ensure that your layouts remain flexible and responsive.

For example, you might use lvh in combination with max-height to set a maximum height for an element, preventing it from overflowing the viewport when the address bar is visible. Alternatively, you can use lvh in conjunction with the calc() function to subtract the height of the address bar from the total height of the element. This ensures that the element always fits within the visible area, regardless of whether the address bar is visible or not.

Dynamic Viewport Height (dvh)

Last but not least, we have dvh, which stands for dynamic viewport height. This unit is arguably the most sophisticated of the new viewport units, as it dynamically adjusts to the current viewport size, taking into account the visibility of the address bar and other browser UI elements. The dvh unit represents 1% of the current viewport height, which means that it updates in real-time as the address bar appears and disappears.

The dvh unit solves the problems associated with vh, svh, and lvh by providing a truly dynamic and responsive way to size elements relative to the viewport. When the address bar is visible, dvh will be smaller, and when the address bar is hidden, dvh will be larger. This ensures that elements sized with dvh always fit perfectly within the visible area, without any unexpected resizing or overflowing.

For example, if you have a full-screen modal that you want to always cover the entire screen, you can set its height to 100dvh. This ensures that the modal will always fit within the visible area, regardless of whether the address bar is visible or not. Similarly, you can use dvh to create consistent vertical spacing between elements, ensuring that the spacing remains proportional to the current viewport height.

The dvh unit is particularly useful for creating single-page applications (SPAs) and progressive web apps (PWAs), where the layout needs to adapt seamlessly to different screen sizes and orientations. By using dvh, you can ensure that your app always looks and feels native, providing a smooth and consistent user experience across all devices.

Like svh and lvh, support for dvh is still evolving, but it is rapidly gaining traction among browser vendors. As more browsers adopt dvh, it will become an indispensable tool for creating truly responsive and dynamic web layouts. In the meantime, you can use feature queries to provide fallback values for older browsers, ensuring that your designs remain accessible to all users.

Practical Examples

Let's look at some practical examples of how you can use these viewport units in your CSS:

Full-Screen Hero Section

To create a full-screen hero section that adapts to the device's orientation, you can use the following CSS:

.hero {
 height: 100vh; /* Fallback for older browsers */
 height: 100dvh; /* Use dynamic viewport height */
 width: 100vw;
 background-image: url('hero-image.jpg');
 background-size: cover;
 background-position: center;
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 text-align: center;
}

This ensures that the hero section always fills the entire screen, regardless of the device or browser.

Responsive Typography

To create responsive typography that scales with the screen width, you can use the vw unit for the font-size property:

h1 {
 font-size: 6vw;
}

p {
 font-size: 1.5vw;
}

This ensures that the text scales proportionally with the screen width, providing a better reading experience on smaller screens.

Consistent Vertical Spacing

To create consistent vertical spacing between sections, you can use the vh or dvh unit for the margin-top or margin-bottom properties:

section {
 margin-bottom: 5vh; /* Fallback for older browsers */
 margin-bottom: 5dvh; /* Use dynamic viewport height */
}

This ensures that the spacing remains proportional to the screen height, providing a visually balanced layout.

Browser Support

It's important to consider browser support when using these viewport units. While vw and vh have excellent support across all modern browsers, svh, lvh, and dvh are relatively new and may not be supported by older browsers. You can use feature queries to provide fallback values for older browsers and ensure that your designs remain accessible to all users.

.element {
 height: 100vh; /* Fallback for older browsers */
 @supports (height: 100dvh) {
 height: 100dvh; /* Use dynamic viewport height */
 }
}

Conclusion

So there you have it! vh, dvh, lvh, svh, and vw units are powerful tools for creating responsive and dynamic layouts that adapt to different screen sizes and orientations. By understanding the nuances of each unit, you can create web designs that look great on any device. Just remember to consider browser support and provide fallback values for older browsers to ensure a consistent user experience. Happy coding, guys!