字体大小 - 百分比混乱 - 和解决方法

Question

我认为span不仅会继承div font-size，还会从现在开始考虑将50％视为100％。因此，基本上以下示例与span的100％相同，因为100％现在是：16 (100%) - 8 (50%) + 4 (50% of 50%) = 12px (150% for <span>)。所以它必须是200％才能相同。

我的问题是：如果我想使用%，可以用它做什么。是否有任何变通办法（类似于CSS重置 - 它不同，我知道）？如果没有，那么什么是使其更易于开发的最佳替代方案，但在响应性样式方面却有效？

CSS：

body {
  font-size: 16px;
}
div {
  font-size: 50%;
}
div > p > span {
  font-size: 150%;
}

HTML：

<div>
  P P P
  <p>
    <span>
      SPAN
    </span>
  </p>
</div>