认识rem

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        html{
            font-size: 50px;
        }

        body{
            margin: 0;
            padding: 0;
            line-height: 1;/*一倍的文字大小的行高*/

            font-size: 20px;
        }


        .em{
            font-size: 2em;
        }

        .rem{
            font-size: 2rem;
        }

        .remBox{
            height: 1rem;
             1rem;
            background: red;
            border: 0.2rem solid #ccc;
            position: relative;
            left: 1rem;
            top: 0;
        }
    </style>
</head>
<body>
    <!--
        1.em.rem 默认的基数是16px  1em 1rem 大小是16px (文字默认的大小就是16px)

        2.em 基数是基于父元素的字体大小

        3.基于谁做计算的？
        rem 当中的r代表是 root 根元素  html当中的根元素是  html标签
        rem的基数是基于文档根元素html标签得分字体大小来决定的

        在使用px这个单位的任何地方都可以用
    -->
    <div class="em">ABC</div>
    <div class="rem">ABC</div>

    <div class="remBox"></div>
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/sxz2008/p/6721693.html