如何根据用户选择全局更新字体大小？

Question

我希望用户可以选择整个应用程序的字体大小，即具有三个选项：大，中，小。 如果用户选择“大”，则会相应地全局调整应用程序的总体字体大小。我已经对此问题进行了一段时间的研究，但未能找到一种解决方案来全局调整所有字体的大小（例如，当选择“大”时，所有字体都会变成x-倍）

Answer 1

您应该为font-size标签设置html，然后，对于其他选择器，请将font-size与 rem 或 em 一起使用。我更喜欢 rem 。 rem 是根据html字体大小计算的。 之后，您可以通过添加类来更改html字体大小。

Answer 2

我认为最简单的方法是在body元素上设置基于像素的字体大小，并对其他元素使用em单位，以使它们的字体大小相对于body元素之一。

然后添加按钮，并让它们在有人单击时通过JavaScript更改body元素的字体大小。使用em值的元素的字体大小将相应更改

Answer 3

您可以尝试以下操作：

CSS

ended: function(event){ // calls after setting the song duration  
    console.log("ended!")
}

JS

:root {
  --font-size: 20px;
}
div {
  font-size: var(--font-size);
}

---

在html元素上设置字体大小，然后用em引用它也可以：

document.documentElement.style.setProperty('--font-size', '16px');