搜 索

[前端开发] CSS中 em 与 rem的区别

  • 133阅读
  • 2022年08月07日
  • 0评论
首页 / CSS / 正文

[前端开发] CSS中 em 与 rem的区别

先简单介绍一下双方的作用

  • em 的值取决于父级的文字大小
  • rem 的值取决于 html 的文字大小

em

1em 相当于父级的文字大小,比如说父级文字大小是 20px ,那么 1em 就是 20px2em 就是 40px

  • em 的值取决于父级的文字大小,如果父级没有指定文字大小,就会往上一层父级查找
  • 如果都没有设置字体大小,那么 1em 就是默认的 16px
  • 如果有多个父级并且都设置了字体大小,那么就采取就会近原则
    <style>
        .a{
            font-size: 20px;
        }
        .a .b{
            font-size: 30px; //就近原则
        }
        .a .b span{
            font-size: 2em; //60px
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="b">
            <span>Hello World!</span>
        </div>
    </div>
</body>

如果它的父级都没有指定文字大小,而 html 指定了文字大小那么就会以 html 的文字大小为准

rem

rem 的值取决于 html 的文字大小,与父级文字大小没有关系,看如下代码

    <style>
        html {
            font-size: 10px; //取决于html的文字大小
        }

        .a {
            font-size: 20px;
        }

        .a .b {
            font-size: 30px;
        }

        .a .b span {
            font-size: 2rem; //20px
        }
    </style>
</head>

<body>
    <div class="a">
        <div class="b">
            <span>Hello World!</span>
        </div>
    </div>
</body>

由此可知:rem 的值直接取决于 html 的文字大小

如果这篇文章能对你有所帮助,那请你给我点一个免费的关注吧!

评论区
暂无评论
avatar