嵌套在 标签内的 给出不同的字体大小答案

【问题标题】：Nested inside a tag giving different font size嵌套在 标签内的 给出不同的字体大小
【发布时间】：2017-06-12 12:23:22
【问题描述】：

使用em 将放大的字体大小直接应用于 标记和嵌套的 标记会产生不同的结果。

body {
 font-size: 14px;
}

p {
 font-size: 1.4em;
}

.enlarge {
  font-size: 1.7em;
}

<p>Normal paragraph text</p>

<p class="enlarge">Enlarged text</p>

<p><span class="enlarge">This text comes out larger than the above.</span></p>

我期待  和  给我同样的结果。

这是一个工作示例：https://jsfiddle.net/huymo47b/

【问题讨论】：

它适用于rem，但不适用于em，因为rem 是相对于body 而em 继承基于父元素的大小
如果字体大小为 14px，p 为 1.4em，那么 p 将为 1.4 x 14px (~19.6px)。如果 p 为 19.6px，.enlarge 为 1.7em，则 .enlarge 将为 19.6 x 1.7 (~33.32px)

标签： html css

【解决方案1】：

您可以使用rem（根em）代替em

em 相对于父元素，而rem 从根 (html) 值引用

css代码变成

body {
 font-size: 14px;
}

p {
 font-size: 1.4em;
}

.enlarge {
  font-size: 1.7rem;
}

代码可以在这里测试：https://jsfiddle.net/zrzahoro/

更新：

rem 从根引用，它是 html 标记。如果你想控制在你的css中引用的字体的值而不是让它使用浏览器的默认值，也给html标签一个固定的字体大小。

【讨论】：

谢谢。当我在 CSS 中添加 html 时，字体大小会略微减小。你知道为什么会这样吗？将您的小提琴与这个进行比较：jsfiddle.net/zrzahoro/1
@user1448031 这是因为你给“html”（我们的 rem 将引用的根元素）一个 14px 的字体大小，而不是使用你的浏览器默认值

【解决方案2】：

“em 单位是基于父元素字体大小计算值的相对单位。这意味着子元素始终依赖其父元素来设置其字体大小。”

参考：CSS-Tricks

您的 标签已经是正常大小的 1,4， 是其父标签的 1,7（已经放大）。

【讨论】：