前端开发常用单位-rem

什么是 rem

rem 就是 root em, 和 em 都是是前端开发中的一个动态单位
rem 和 em 的区别在于, rem 是一个相对于根元素字体大小的单位
例如: 根元素(html) font-size: 12px;, 那么 1rem 就等于 12px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            font-size: 12px;
        }

        .father {
            width: 100px;
            height: 200px;
            background: yellow;
        }

        .son {
            width: 10rem;
            height: 10rem;
            background: green;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

rem 特点

除了根元素以外, 其它祖先元素的字体大小不会影响 rem 尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 100px;
            height: 200px;
            font-size: 10px;
            background: yellow;
        }

        .son {
            width: 10rem;
            height: 10rem;
            background: green;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

如果根元素设置了字体大小, 那么就相对于根元素的字体大小(如上已经演示)
如果根元素没有设置字体大小, 那么就相对于 浏览器 默认的字体大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 100px;
            height: 200px;
            background: yellow;
        }

        .son {
            width: 10rem;
            height: 10rem;
            background: green;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>