如何理解页面尺寸单位em？em和rem有何区别？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

本文说一个非常基础的页面尺寸单位的问题。通过苏南大叔的以往文章，大家可以知道：页面中最常见的尺寸单位是px，如果考虑到自适应等因素的话，常见的尺寸是rem。（当然，还有其它一些奇怪的单位，比如vh、vw等，以及小程序中的单位rpx）。本文中重点描述的是em这个单位，它的使用场景，经常是用于p标签的左边空两个字符text-indent。

大家好，这里是苏南大叔的程序如此灵动博客，记录苏南大叔的一些经验总结。如果您喜欢本文，欢迎转载。本文测试环境：谷歌浏览器@ 111.0.5563.111。

em

最常见的应用场景就是段落p的左侧空两格。

<p>文字缩进两格，文字缩进两格，文字缩进两格，文字缩进两格，文字缩进两格，文字缩进两格</p>
<style>
  p {
    text-indent: 2em;
  }
</style>

然而，本文是讨论em的非常见情况的使用的。这种情况就是使用em单位的节点多层嵌套，举例这个的原因是，它最能够体现和rem单位的区别所在。

<div id="box">
    <div class="em">
        14*1.5</br>
        <div class="em">
            14*1.5*1.5</br>
            <div class="em">
                14*1.5*1.5*1.5</br>
            </div>
        </div>
    </div>
</div>
<style>
    #box {
        font-size: 14px;
    }
    .em {
        font-size: 1.5em;
    }
</style>

在这个例子中，em单位应用在了多层嵌套的div上，在最外侧，有定义px为单位的节点。可以看到的是：使用em单位的嵌套节点，实际的字体尺寸随着嵌套的加深而不断变化。尺寸变化的基准是em的上一次dom。如果不存在的话，就是html标签或者body标签里面的font-size。

em不光是用于字体大小的尺寸（虽然日常是这么用的），用作宽度高度之类的也是可以的。

rem

这里不得不提起苏南大叔关于rem.js的这篇文章，链接如下：

• https://newsn.net/say/remjs.html

与em所不同的是：

• rem的基准尺寸是定义在html标签上的。
• 正是因为基准的不同，em随着嵌套的增加，大小变化。rem随便嵌套，大小不变。

测试代码：

<div id="box">
    <div class="rem">
        14*1.5</br>
        <div class="rem">
            14*1.5</br>
            <div class="rem">
                14*1.5</br>
            </div>
        </div>
    </div>
</div>
<style>
    html{
        font:italic bold 14px/30px Georgia, serif;
    }
    #box{
        font-size: 500px;
    }
    .rem {
        font-size: 1.5rem;
    }
</style>

题外话

这里就提一下font的一个特殊写法：

font:italic bold 14px/30px Georgia, serif;

根据开发者工具的运算结果，这个写法的意思是：font-size:14px以及line-height:30px。

相关文章

• https://newsn.net/say/css-font-family-serif.html
• https://newsn.net/say/font-family-name.html
• https://newsn.net/say/font-family-render.html
• https://newsn.net/say/smartapp-rpx.html
• https://newsn.net/say/css-vw.html

总结

苏南大叔还写了一些奇怪的css的写法的文章，文章链接如下：

• https://newsn.net/tag/css/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。