html - 覆盖组件中的 rem

Question

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

• 该网站为 body 设置了 14px 的 font-size(这不受我控制)。
• 组件的 CSS 使用 rem 作为 font-size(这也不在我的控制范围内)。

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

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

Answer 1

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

html {
  font-size: 16px;
}

或

:root {
  font-size: 16px;
}

MDN