How to Use vh and vw Units in CSS for Responsive Designs

In the world of web development, creating responsive designs is crucial to ensure that our pages look good on any device. To achieve this, it's essential to understand and correctly use measurement units in CSS, especially the vh (viewport height) and vw (viewport width) units. In this article, we will explore in depth how to use these units to enhance the user experience across different devices.

What Are vh and vw Units?

The vh and vw units are relative units based on the size of the browser window (viewport):

vh (viewport height): 1vh is equal to 1% of the viewport's height. For example, if the viewport has a height of 1000px, 1vh will be equal to 10px.
vw (viewport width): 1vw is equal to 1% of the viewport's width. Thus, if the viewport has a width of 1000px, 1vw will be 10px.

These units are particularly useful for creating flexible designs that adapt to different screen sizes.

Advantages of Using vh and vw

1. Fluid Designs

The vh and vw units allow elements to be sized proportionally to the size of the window, making it easier to create fluid layouts. This is particularly useful when you want an element to cover a percentage of the screen, regardless of the device size.

2. Time-saving in Adaptation

By using these units, developers can completely avoid using media queries for some use cases, saving time in development and maintenance.

3. Improved Accessibility

Designs that use vh and vw dynamically adjust to the screen size, which can enhance the user experience on mobile devices and screens of various resolutions.

How to Use vh and vw in Your CSS

Common Uses

The vh and vw units can be used in various CSS properties, such as width, height, margin, padding, font-size, and more.

Example Usage

.header {
    height: 50vh; /* The header's height will be 50% of the viewport height */
}

.container {
    width: 80vw; /* The container will have a width of 80% of the viewport width */
    margin: 0 auto; /* Center the container */
}

.text {
    font-size: 2vw; /* The text size adapts to 2% of the viewport width */
}

Creating a Responsive Design

To demonstrate the use of vh and vw, let's consider a simple example of a responsive card layout:

<div class="card">
    <h2>Card Title</h2>
    <p>Card Description.</p>
</div>

In the CSS, we could apply the following:

.card {
    width: 90vw; /* 90% of the viewport width */
    height: 50vh; /* 50% of the viewport height */
    padding: 2vh; /* Padding of 2% of the viewport height */
    background-color: #f0f0f0;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.card h2 {
    font-size: 4vw; /* Title size adjusted to 4% of the viewport width */
}

.card p {
    font-size: 2.5vw; /* Description text size */
}

Considerations When Using vh and vw

1. Limiting Text Scaling

Using vw for font size can sometimes result in text becoming extremely large or small on screens of different dimensions. Therefore, it’s important to set a minimum and maximum size using the clamp() property.

.title {
    font-size: clamp(1.5rem, 3vw, 4rem); /* Minimum size of 1.5rem, maximum of 4rem */
}

2. Adjustments for Mobile Devices

Sometimes, excessive use of vh and vw can create issues on mobile devices due to the disappearing and reappearing navigation bars. It's recommended to conduct thorough testing on different devices to ensure that the design responds appropriately.

Practical Example: A Complete Responsive Design

Below is a practical example of a simple web page that utilizes vh and vw to achieve a responsive design:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Design with vh and vw</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .header {
            height: 20vh;
            background-color: #4CAF50;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3vw;
        }
        .main {
            padding: 2vh 5vw;
            height: 60vh;
            background-color: #f0f0f0;
        }
        .footer {
            height: 20vh;
            background-color: #333;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2vw;
        }
    </style>
</head>
<body>

    <div class="header">Page Header</div>
    <div class="main">
        <h2>Main Content</h2>
        <p>This is an example of how to use vh and vw units in a responsive design.</p>
    </div>
    <div class="footer">Footer</div>

</body>
</html>

Conclusion

The vh and vw units are powerful tools for any web developer looking to create responsive designs. With them, we can ensure our pages adapt fluidly to any screen size, enhancing the user experience. Practice implementing them and experiment with different designs to better understand their potential. Start using them in your next project and watch your designs come to life!

Now, you are ready to implement vh and vw in your projects. Good luck!