Menu
CSS

Responsive Units em, rem, vw, vh, % units

Responsive units in CSS help create layouts that adapt to different screen sizes and devices. Using relative units like em, rem, vw, vh, and % ensures your design scales smoothly. Let's explore each of these units with examples.

 

1. em Unit

The em unit is relative to the font-size of the element. If no font-size is specified, it inherits from the parent element.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Units - em</title>
    <style>
        body {
            font-size: 16px; /* Base font-size */
        }

        h1 {
            font-size: 2em; /* 2 times the base font-size (32px) */
        }

        p {
            font-size: 1.5em; /* 1.5 times the base font-size (24px) */
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

 

2. rem Unit

The rem unit is relative to the font-size of the root element (<html>).

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Units - rem</title>
    <style>
        html {
            font-size: 16px; /* Base font-size */
        }

        h1 {
            font-size: 2rem; /* 2 times the root font-size (32px) */
        }

        p {
            font-size: 1.5rem; /* 1.5 times the root font-size (24px) */
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

 

3. vw and vh Units

  • vw (viewport width) is 1% of the width of the viewport.
  • vh (viewport height) is 1% of the height of the viewport.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Units - vw and vh</title>
    <style>
        .box {
            width: 50vw; /* 50% of the viewport width */
            height: 50vh; /* 50% of the viewport height */
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

 

4. % Unit

The % unit is relative to the parent element's size.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Units - %</title>
    <style>
        .container {
            width: 80%; /* 80% of the parent's width */
            background-color: lightblue;
            padding: 20px;
        }

        .content {
            width: 50%; /* 50% of the container's width */
            background-color: lightgreen;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            This is some content inside a container.
        </div>
    </div>
</body>
</html>
CSS