We use cookies to enhance your experience on the site

Responsive units vw, vh + relative units

In previous lessons, you could see the topic of units. Responsiveness is a good topic to explain all types of units:

Absolute units - these are values that are not relatively dependent on previously declared values for other elements.

cm - centimeters
mm - millimeters
px - pixels (1px = 1/96th of 1in)

Relative units - define a value relative to another value. Relative units scale better for responsive devices.

em - relative to the font-size of the element (2em means 2 times the size of the current element) rem - relative to the root element - most commonly the html element vw - 1vw is 1% of the current device width vh - 1vh is 1% of the current device height % - relative to the parent element

Viewport Units (vw, vh)

The vw (viewport width) and vh (viewport height) units are units equivalent to a percentage of the browser window's width or height.

vw - Viewport Width

1vw corresponds to 1% of the browser window width.

1h1 {
2  font-size: 5vw; /* Font size adjusts to 5% of the browser window width */
3}

vh - Viewport Height

1vh corresponds to 1% of the browser window height.

1.section {
2  height: 50vh; /* Section height adjusts to 50% of the browser window height */
3}

Relative Units (em, rem)

Relative units, such as em and rem, allow elements to scale in relation to font size.

em

The em unit is relative to the font size of the parent element.

1p {
2  font-size: 16px;
3}
4
5p span {
6  font-size: 1.5em; /* 1.5 * 16px = 24px */
7}

rem

The rem unit is relative to the font size of the root element, which is usually the <html> element.

1html {
2  font-size: 16px;
3}
4
5h1 {
6  font-size: 2rem; /* 2 * 16px = 32px */
7}

Practical Applications

Text Scaling: vw and rem are useful for scaling text size depending on the browser window size or base size.
Creating Responsive Layouts: vh and vw can be used to create layouts that perfectly adapt to different screen sizes.
Modular Design: Relative units such as em and rem enable creating more modular and flexible CSS code that is easy to adapt and maintain.

Task: Responsive Layout using vw, vh, em, and rem units

Your task is to create a web page with a responsive layout using vw, vh, em, and rem units. The page should consist of a header, a main section with two columns, and a footer.

Step 1: Create a basic HTML document structure

Create a new HTML file and add the basic HTML document structure. Add a header, a main section with two columns, and a footer.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Link CSS file -->
7  <title>Responsive Layout</title>
8</head>
9<body>
10  <header class="header">
11    <h1>Responsive Header</h1>
12  </header>
13  <main class="main">
14    <section class="section">
15      <div class="column">
16        <h2>Column 1</h2>
17        <p>This is a sample paragraph of text in column 1.</p>
18      </div>
19      <div class="column">
20        <h2>Column 2</h2>
21        <p>This is a sample paragraph of text in column 2.</p>
22      </div>
23    </section>
24  </main>
25  <footer class="footer">
26    <p>&copy; 2023 Responsive Layout. All rights reserved.</p>
27  </footer>
28</body>
29</html>

Step 2: Create a CSS file

Open or create a new CSS file and save it as

styles.css

Step 3: Basic styling

Add basic styles for

.header

.main

.section

.column

, and

.footer

elements. Use vw, vh, em, and rem units to create a responsive layout.

1body {
2  font-family: Arial, sans-serif;
3  margin: 0;
4  padding: 0;
5  background-color: #f0f0f0;
6}
7
8.header {
9  background-color: #333;
10  color: #fff;
11  padding: 2vh 0;
12  text-align: center;
13}
14
15.main {
16  padding: 2vw;
17}
18
19.section {
20  display: flex;
21  justify-content: space-between;
22}
23
24.column {
25  width: 48%;
26  background-color: #fff;
27  padding: 2em;
28  border-radius: 1rem;
29  box-shadow: 0 0 10px rgba(0,0,0,0.1);
30}
31
32.column h2 {
33  font-size: 2rem;
34  margin-bottom: 1em;
35}
36
37.column p {
38  font-size: 1.2rem;
39}
40
41.footer {
42  background-color: #333;
43  color: #fff;
44  text-align: center;
45  padding: 1vh 0;
46}

Step 4: Add Media Queries for Responsiveness

To make the layout even more responsive, add media queries to adjust the layout on smaller screens.

1@media (max-width: 768px) {
2  .section {
3    flex-direction: column;
4  }
5
6  .column {
7    width: 100%;
8    margin-bottom: 2vh;
9  }
10
11  .column:last-child {
12    margin-bottom: 0;
13  }
14}
15
16@media (max-width: 480px) {
17  .header {
18    padding: 3vh 0;
19  }
20
21  .column {
22    padding: 1em;
23  }
24
25  .column h2 {
26    font-size: 1.5rem;
27  }
28
29  .column p {
30    font-size: 1rem;
31  }
32}

Additional task

Add more sections to the page and experiment with different
```
vw
```
,
```
vh
```
,
```
em
```
, and
```
rem
```
values to see how the layout changes.
Test your skills by adding other elements, such as images, buttons, or forms and see how different units affect their responsiveness.
Add different styles to your page, e.g., changing colors, margins, or other element properties, to better understand how different CSS options work.
Add animations to elements to add interactivity and a better user experience.

Summary

Understanding and using different CSS units is crucial for creating responsive and flexible layouts. Experiment with different units and styles to better understand how they work and how you can use them to create beautiful, responsive websites.

Go to CodeWorlds→