em,rem,vw,vh在实例中的演示 -

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css常用单位em和rem</title>
</head>
<body>
    <header>页眉</header>
    <main>
        <!-- font-size = 16px -->
        <div>Hello</div>
        <!-- font-size = 20px -->
        <div style="font-size:1.25rem">World</div>
        <!-- font-size = 32px -->
        <div style="font-size:2rem">china</div>
        <div class="box">box</div>
    </main>
    <footer>页脚</footer>
</body>
</html>
<style>
    html {
        width: 100vw;
        height: 100vh;
    }
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body > * {
        outline: 1px solid;
        background-color: aqua;
    }
    header,footer {
        width: 100vw;
        height: 5vh;
    }
    main {
        background-color: aquamarine;
        width: 100vw;
        margin: 1vh 0;
        /* calc（）运算需要在运算符两边要加空格，乘除法不用加 */
        min-height: calc(100vh - 5vh - 5vh - 2vh);
    }
    .box {
        background-color: bisque;
        width: 50vw;
        height: 50vh;
        border: 2px solid red;
        margin: 5px;
        padding: 10px;
    }
</style>