Viewport Units

Part of the Styling with CSS section of Coddy's HTML journey — lesson 64 of 76.

In CSS, viewport units are relative units of measurement that are based on the size of the browser's viewport (the visible area of the web page). They provide a way to create responsive designs by sizing elements and text proportionally to the width or height of the viewport. Viewport units are particularly useful for creating fluid layouts, scaling text, and positioning elements in a way that adapts to different screen sizes.

There are four viewport units:

vw (viewport width): Represents 1% of the viewport's width. For example, 10vw is equal to 10% of the viewport width.

vh (viewport height): Represents 1% of the viewport's height. For example, 25vh is equal to 25% of the viewport height.

vmin (viewport minimum): Represents 1% of the smaller dimension of the viewport (width or height). For example, if the viewport is wider than it is tall, 5vmin is equal to 5% of the viewport height.

vmax (viewport maximum): Represents 1% of the larger dimension of the viewport (width or height). For example, if the viewport is wider than it is tall, 8vmax is equal to 8% of the viewport width.

Here's the basic syntax for using viewport units:

selector {
    property: value;
}

selector: The CSS selector that targets the HTML element(s) you want to style.

property: The CSS property you want to set (e.g., width, height, font-size, margin, padding).

value: A value that includes viewport units (e.g., 50vw, 75vh, 10vmin, 5vmax).

For example:

.box {
    width: 50vw; /* The box width will be 50% of the viewport width */
    height: 30vh; /* The box height will be 30% of the viewport height */
}

In this example, the .box element has a width of 50vw and a height of 30vh, making it responsive to both the width and height of the viewport.

Challenge

Easy

You are given an HTML document with a heading (<h1>), a paragraph (<p>), and a division (<div>). Your task is to use viewport units to make these elements responsive. Follow the steps below:

Write a CSS rule that targets the <h1> element. Set its font-size to 6vw.
Write a CSS rule that targets the <p> element. Set its font-size to 4vmin.
Write a CSS rule that targets the <div> element. Set its width to 80vw and its height to 50vh.

Cheat sheet

Viewport units are relative units based on the browser's viewport size, useful for creating responsive designs.

Four viewport units:

vw (viewport width): 1% of viewport width
vh (viewport height): 1% of viewport height
vmin (viewport minimum): 1% of smaller viewport dimension
vmax (viewport maximum): 1% of larger viewport dimension

Basic syntax:

selector {
    property: value;
}

Example:

.box {
    width: 50vw; /* 50% of viewport width */
    height: 30vh; /* 30% of viewport height */
}

Try it yourself

<html>
<head>
    <title>Viewport Units</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
    <h1>Antarctica</h1>  
    <p>The coldest continent, covered in ice and home to penguins and seals.</p>  
    <div>It has no permanent residents, only research stations.</div> 
</body>
</html>