em应用知多少

[aoilti]

身处日益璀璨的前端开发行业，我们经常会和各种计量单位打交道，比较为我们熟知的比如px，我们每天都会沉迷于1px的优化之中，也常常会因为设计同学的一句’你这个地方间距不对啊‘而头痛不已，所以问题来了，px是个什么鬼呢？

px

px的英文单词是Pixel，在浏览器里1px就代表了一个像素点，而一个像素点又取决于显示屏的分辨率，所以分辨率高的显示屏显示的线条就越细腻，作为前端的我们应该都清楚，就不过多介绍。

下面我要着重讲一下em（是不是想着读了半天，想见识一下px的黑科技？对，就这么多）

em

首先，作为一个合格的小学毕业生，大家学习写作文的时候，都会被老师强调，各位同学，我们每一段的开头一定要缩进两个字。

在前端开发里，我们如果实现这样一个布局效果会使用 text-indent: 2em;

那么此时1em = 一个字。

所以一个字的大小又取决于什么呢？

没错，我们设置的 font-size ，因此我们可以得出结论，em，是一个相对单位，它相对的是当前文本的大小。至于当前文本的大小，需要注意在html里，字体的大小是层层继承的关系，em的参考单位就会层层向上查找。如果没有设置字体大小或者设置了 font-size: initial; ，浏览器默认的字体大小为 16px。

可是问题来了，这玩意貌似除了实现老师布置的语文作文之外，似乎并没有什么锤子用？

事实上，在某些场景下，妙用em会让我们事半功倍。比如说，某天我们会被产品告知，当前这个按钮最大只能有10个字，超出十个字的部分我们要显示省略号，通常遇到这样的需求，我们都会头痛。此时此刻就是使用em的最好时机。

那em除了上述的场景之外，还有其它的使用场景吗？当然有。

在前端中世纪，前端er们都知道一个叫iconfont的网站，它会把一个个的图标整合到一个文件里，当前端使用的时候，一个个的图标会成为字体，可以完美使用字体里的各种属性，比如font-size、color、line-height等，但是它会带来另外一个问题，就是随着项目的不断迭代，字体文件会不断增大，另外团队协作上也会出现一些问题，比如同样的一个添加图标，在iconfont 文件里会有很多个名字，会有add-1， add-2，search-1....等等。而这些名字就代表着一个图标，可是我明明都长得一样啊，冗余的图标更增加了字体文件的大小，同时也为项目协作带来问题，一个前端同学通常会在数千个iconfont里纠结不已（这个图标有没有呢？我要不要上传一个？）。

那么在当前的前端世界里，大家都会用什么来代替iconfont呢？这个问题我从开源社区里找到了答案。在ant-design里的图标已经在使用svg来代替iconfont。

svg相对于iconfont来说更加清晰，具有放大不失真的效果。具体优点再深入下去我就不展开来讲，感兴趣的同学可以自己研究一下搞一个每日一学。但是svg相对于iconfont来说，无法使用font-size，如果我们使用svg来代替iconfont的话，想要设置字体的大小就必须通过设置svg的attribute中的width和height，比如我们有一个Icon组件，在使用时就可以这么写：<Icon name='add' width='12px' height='12px' /> 。

有没有一种方式可以不写width和height减少业务代码与组件代码的耦合？

使用em！

我们可以在组件内，使用一个行内元素的标签包裹一下svg，同时对svg的width和height样式写死为1em，此时，我们只需要设置外层的行内元素即可。react版本的ant-design里它们貌似（没仔细研究，仓库代码里没搜到）是通过工具转换svg时对svg设置了1em的属性。但是在angular版本的ant-design里，我找到了相关的实现，感兴趣的同学 戳这里 (第40-43行)。

妙用em可以为我们节省大量的时间。

那么rem是个啥呢？

rem

rem是root em的缩写。root即为根。在html里，root就是html标签，em又是相对于当前元素文本大小的单位。所以从字面意思上就可以理解rem是相对于根元素文本字体大小的一种单位，即 1rem = root.fontSize .

作为前端，我们常常会在布局里使用rem，关于rem的使用这里只介绍这么多。rem不是银弹，下一代的弹性布局方案vw、vh已经应用很久，了解了各种布局单位，只想感叹一句，css才是最难的。