覆盖组件中的 rem

Question

我为网站编写了一个组件，该组件呈现一些 HTML，并使用 CSS 设置此 HTML 的样式。到目前为止，一切都很好。现在我们有以下约束：

• 网站设置了一个font-size for body of 14px（这不是我能控制的）。
• 组件的CSS对font-size使用了rem（这也不在我的控制范围内）。

现在的问题是组件呈现的太小了，因为它假设有一个 font-size 的 body 的 16px。是的，我知道，问题当然是为什么要使用 rem，但如前所述，这是我无法控制的

现在我的问题是：假设我希望组件使用 16px 的基础 font-size，并假设我需要坚持使用 rem，并假设我需要为 body 坚持使用 14px - 解决这个问题最简单的方法是什么？

Answer 1

您可以尝试在 html 上设置字体大小，因为 rem 是相对于它的。

html {
  font-size: 16px;
}

或

:root {
  font-size: 16px;
}

MDN