浅析 em 和 rem

eason_ylf

已于 2023-09-15 17:28:29 修改

阅读量519

点赞数

分类专栏： em-rem 文章标签： css html css3

于 2022-12-05 21:07:25 首次发布

本文链接：https://blog.csdn.net/qyl_0316/article/details/128193285

版权

em-rem 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

em 和 rem 都是相对长度单位
em 是相对于父级元素的font-size 大写来定义自身的大小
rem 是相对于根节点（html{}, body{}, :root{}）font-size来定义大小

Talk is cheap, show me the code !(空谈无用，上代码)

em

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>em demo</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            /*
            1. 浏览器默认的字体大小是 16px,所以 1em = 16px
            2. 使用 em 时如果嵌套的子元素过多，而且子元素会继承父元素的 font-size 属性，
               使得的计算起来比较繁琐, 先检查自身有没有 font-size属性，如果有则使用自身的，
            3. 如果没有，则查看父级元素的 font-size值
            4. 因此不推荐使用 em,替代方案是 rem (root element)
            */
            .div {
                width: 20em;
                height: 20em;
                font-size: 20px;
                background-color: skyblue;
                margin: 0 auto;
                margin-top: 15px;
            }
            .div1 {
                /*如果自身没有 font-size这个属性，则使用父级的font-size属性值*/
                width: 15em; 
                height: 15em;
                background-color: lightblue;
            }   
            .div2 {
                /*如果自身有 font-size这个属性，则使用自身的属性值*/
                font-size: 10px;
                width: 10em;
                height: 10em;
                background-color: lightgreen;
            }
            .div3 {
                /*div3 自身没有 font-size属性，则使用父级 div2 的 font-size值*/
                width: 8em;
                height: 8em;
                background-color: lightpink;
            }
        </style>
    </head>
    <body>
        <div class="div">我是 div
            <div class="div1">我是 div1
                <div class="div2">我是 div2
                    <div class="div3">我是 div3
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

rem

<!DOCTYPE html>
<html lang="en">
<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>rem demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 
            :root {
                font-size: 30px;
            }
            html {
                font-size: 50px;
            } 
        */
        /*
            1. 浏览器默认的字体大小是 16px,所以 1rem = 16px
            2. :root{} 就等同于 html{},总之，是根元素
            3. 因此不推荐使用 em,替代方案是 rem (root element)
            4. 1rem = 16px
        */
        html {
            font-size: 20px;
        }
        .div {
            width: 20rem;
            height: 20rem;
            background-color: lightblue;
        }
        .div1 {
            width: 15rem;
            height: 15rem;
            background-color: lightgreen;
        }
        .div2 {
            width: 160px;
            height: 160px;
            font-size: 16px;
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <div class="div">我是 div 元素</div>
    <div class="div1">我是 div1 元素</div>
    <div class="div2">我是 div2 元素</div>
</body>
</html>