CSS 中相对长度 rem 和 em 如何区别

最新推荐文章于 2024-09-04 11:55:18 发布

袁森Simon

最新推荐文章于 2024-09-04 11:55:18 发布

阅读量3.4k

点赞数 4

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/simonyuan100/article/details/52089772

css 专栏收录该内容

3 篇文章

订阅专栏

本文详细对比了em与rem这两种相对长度单位的区别，并通过实例代码展示了它们在实际网页布局中的应用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

rem vs em

做为相对长度单位的俩个活宝，都是以倍数关系定长度，只是参照物不一样，这里就事例分析两者的区别：
1，em 的参照倍数对象为其自身字体大小，font-size;如果没有向上继承；
2，rem的参照倍数对象为根元素

事例代码：

<html style="font-size:14px">
<div style="font-size:14px;background:#bbb;border:1px solid #f00;margin-bottom:5px;">
        this is a 14px div
        <p style="font-size:1em;background:#ccc;">
            this is a 1em p in 14px div
        </p>
    </div>

    <div style="font-size:10px;background:#b71119;border:1px solid #006f00;color:#fff;margin-bottom:5px">
        this is a 10px  div
        <p style="font-size:2em;background:#b0b000">
            this is a 2em p in 10px div
            <span style="font-size:1em;color:#b71119">
               span: this is a 1em span in 2emp of 10px div;
            </span>
        </p>
    </div>
    <div style="font-size:1rem;background:#ee7324;padding-bottom: 1px;">
        this is 1rem div
        <p style="font-size:2rem;background: #eee">
            this is a 2rem p in 1rem div
            <span style="font-size:.5rem;color:green">span: this is a 0.5rem span in 2rem p of 1rem div</span>
        </p>
    </div>

第一个灰色的div 下14px字体大小和其子元素1em的P一致；第二个红色的div 下10px 子元素p设置2em 为2倍父元素大小，p下span 设置为1em 可见大小跟P保持一致；第三个橙色div 1rem 子元素p 2rem 孙元素span 0.5rem 可见大小都是跟根元素HTML字体大小成对应比例