1. vh
   1. vh stands for viewport height
   2. This unit is based on the height of the viewport
   3. A value of 1vh is equal to 1% of the viewport height
   4. A value of 100vh is equal to 100% of the viewport height
2. vw
   1. 1vw stands for viewport width
   2. This unit is based on the width of the viewport
   3. A value of 1vw is equal to 1% of the viewport width
3. vmin
   1. vmin stands for viewport minimum
   2. This unit is based on the smaller dimension of the viewport
   3. If the viewport height is smaller than the width, the value of 1vmin will be equal to 1% of the viewport height
   4. Similarly, if the viewport width is smaller than the height, the value of 1vmin will be equal to 1% of the viewport width
4. vmax
   1. vmax stands for viewport maximum
   2. This unit is based on the larger dimension of the viewport
   3. If the viewport height is larger than the width, the value of 1vmax will be equal to 1% of viewport height
   4. Similarly, if the viewport width is larger than the height, the value of 1vmax will be equal to 1% of the viewport width
5. Comparison with percentages
   Viewport units differ from percentages in that percentage width or height of a child element is determined with respect to its parent

Example (viewport units)

    .wrapper2 {
        width: 60vw;
        height: auto;
        min-height: 15vh;
        border: 2px solid lightgoldenrodyellow;;
    }

    .child2 {
        width: 30vw;
        border: 2px solid green;
        height: auto;
        min-height: 7.5vh;
        margin-left: auto;
        margin-right: auto;
        background-color: lightgoldenrodyellow;
    } 

    <div class="wrapper2">
        <div class="child2"></div>
    </div> 

1. percentages are always set relative to some other value
2. For example, if you set an element's font-size as a percentage, it will be a percentage of the font-size of the element's parent
3. If you use a percentage for a width value, it will be a percentage of the width of the parent

Example (Percentages)

    .wrapper {
        width: 90%;
        height: auto;
        min-height: 100px;
        border: 2px solid lightgoldenrodyellow;;
    }

    .child {
        width: 50%;
        border: 2px solid green;
        height: 50%;
        min-height: 50px;
        margin-left: auto;
        margin-right: auto;
        background-color: lightgoldenrodyellow;
    }

    <div class="wrapper">
        <div class="child">
    </div>

Note

1. Represents the calculated font-size of the element
2. If used on the font-size property itself, it represents the inherited font-size of the element

Example 1 (em)

Note

1. Note that the descender li tag must be present for nesting to cause the sequential increase in size
2. If it is not, as with ems_one (ems and ems_one are identical), then font-size is inherited, but there is no sequential increase in size

    .ems li {
        font-size: 1.5em;
        color: #000080;
    } 

    .ems_one {
        font-size: 1.5em;
        color: #000080;
    } 

        <figure>
            <ol class="ems">
                <li>One-One</li>
                <li>One-Two
                    <ol type="i">
                        <li>Two-one</li>
                        <li>Two-two
                            <ol type="a">
                                <li>Three-one</li>
                            </ol>
                        </li>
                    </ol>
                </li>
            </ol>
            <figcaption>
                <code>ems li {...}</li></code>
            </figcaption>
        </figure>

        <figure>
            <ol class="ems_one">
                <li>One-One</li>
                <li>One-Two
                    <ol type="i">
                        <li>Two-one</li>
                        <li>Two-two
                            <ol type="a">
                                <li>Three-one</li>
                            </ol>
                        </li>
                    </ol>
                </li>
            </ol>
            <figcaption>
                <code>ems {...}</code>
            </figcaption>
        </figure>

Example 2 (em)

Note

1. The descender div tag must be present for nesting to cause the sequential increase in size

    .div_ems div {
        padding-left: 5%;
        font-size: 2.5em;
        color: rgb(0 0 128);
    } 

    .div_ems_one {
        padding-left: 5%;
        font-size: 2.5em;
        color: rgb(0 0 128);
    } 

    <div class="div_ems">
        Hello World
        <div>
            Hello World
            <div>Hello W</div>
        </div>
    </div>

    <div class="div_ems_one">
        Hello World
        <div>
            Hello World
            <div>Hello W</div>
        </div>
    </div> 

1. lh and rlh are relative length units similar to em and rem
2. The difference between lh and rlh is that the first one is relative to the line height of the element itself, while the second one is relative to the line height of the root element usually html