为什么rems并不总是用相同的结果计算出来

Question

任何人都可以向我解释这种行为吗？ https://codepen.io/anon/pen/BrRpeB

我不明白内部xp元素的计算字体大小如何比外部<span>元素大......

＆＃13;

＆＃13;

<code>

＆＃13;

:root {
  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
}
span, code, div {  font-size: 1.6rem; }

＆＃13;

＆＃13;

＆＃13;

Answer 1

REM因为我确定你知道代表root em，并且em是基于父元素的font-size。由于示例中每个元素的字体大小是百分比（如元素大小的百分比），因此大小不同的元素会导致生成不同的字体大小。如果您的原始根字体大小是像像素一样的设置量，则结果将是包含相同大小字体的元素，例如下面的代码片段。

＆＃13;

＆＃13;

:root {
  font-size: 16px; /* font-size 1em = 10px on default browser settings */
}
span, code, div {  font-size: 1.6rem; }

＆＃13;

<code>Outer <span>inner</span> outer</code>

＆＃13;

＆＃13;

＆＃13;