Vue进阶（幺柒零）：前端用户体验提升（四）应用 rem em 实现字体自适应_vue em

有一个比较普遍的误解，认为 em 单位是相对于父元素的字体大小。 事实上，根据W3C标准 ，它们是相对于使用em单位的元素字体大小。 父元素的字体大小可以影响 em 值，但这种情况的发生，纯粹是因为继承。

使用 em 单位存在继承的时候，情况会变得比较棘手，因为每个元素将自动继承其父元素的字体大小。

继承效果只能被明确的字体单位覆盖，比如px,vw 使用 em 单位的元素字体大小根据它们来定。 但该元素可能继承其父元素的字体大小，而父元素又继承其父元素的字体大小，等等。 因此，以 em 为单位的元素字体大小可能会受到其任何父元素的字体大小影响。

二、em 继承的例子

如果根元素字体大小为 16px (通常是默认值) ，一个子元素 div 里面padding值为 1.5em，该 div 将从根元素继承字体大小 16px。 因此padding会翻译成 24px，即 1.5 x 16 = 24。

如果多加一个div来包裹原先的div，然后设置其字体大小为 1.25em呢?

包裹的 div 继承根元素字体大小 16px ，并乘以它自己的 1.25em 的字体大小。 这将设置包裹 div 字体大小为 20px，即 1.25 x 16 = 20。 现在原始的 div 不再直接从根元素继承,而是从其新的父元素继承字体大小为 20px 1.5em 其padding值现在等于 30px，即 1.5 x 20 = 30。

这个继承效应可以更复杂，如果向原始的 div 添加 em 字体单位，比方说 1.2em。 Div 从其父级继承 20px 字体大小，然后，乘以它自己的 1.2em 设置，给它 24px，即 1.2 × 20 = 24 新字体大小。 div上的1.5em padding 现在将再次改变大小&