Javascript如何将文本放大10%

我正在制作一个网站，它几乎完成了，在测试时，有人提到了文本大小的设置。现在我知道我可以通过检查，将字体设置为其他设置的设置值。但是我想看看我是否可以用Javascript来实现它

在我的设置页面上，我有一个从80%到120%的

范围
输入，但它的工作原理是它将根据当前值使文本大小变大。例如，大小设置被设置为100%，然后我将其增加到110%。我希望所有文本都比以前大10%，但我不知道如何做，即使这是可能的。如果任何人有不同的方法来改变字体大小的基础上设置，这将是有用的

或者我可以这样做：

font-size: {{setting}};

在我加载了CSS的其余部分之后，对于整个文档，这意味着是否会将所有文本设置为该大小，或者根据其是否超过100%使其变大/变小？
您可以将所有文本元素的字体大小更改为一个变量，如下所示：

:root {
    --base-size: 10px;
}
.paragraph-here {
    font-size: var(--base-size);
}
.heading-here {
    font-size: calc(2 * var(--base-size));
}

body {
    zoom: 110%;
}

--base size
变量可以在JavaScript中以内联样式进行自定义

另一个选项是向整个页面添加
zoom
，如下所示：

:root {
    --base-size: 10px;
}
.paragraph-here {
    font-size: var(--base-size);
}
.heading-here {
    font-size: calc(2 * var(--base-size));
}

body {
    zoom: 110%;
}

这将增加整个页面，而不仅仅是文本元素

我希望这能有所帮助。
另一方面：

$root-font-size: 16px;

@function rem($size) {
  @return $size / $root-font-size * 1rem;
}

html {
  font-size: ($root-font-size / 16px) * 100%;
}

.some-block {
  font-size: rem(24px);
}

设置元素字体大小的“正确”方法是使用“rem”或“em”单位，而不是固定的“px”单位

如果您的文档使用此方法，则只需更改正文的字体大小即可更改所有其他元素的大小


函数调整大小（系数）{
设sizest=document.body.style.fontSize；
设尺寸=数量（尺寸替换（'rem'，''）| | 1；
设更大=（大小*因子）.toFixed（1）+‘rem’；
document.body.style.fontSize=更大；
}
*{
保证金：0.2rem；
}

更大的
更小
氢
H3
氢
段落

.addEventListener（“更改”，（）=>document.body.className=“fontsize-”+this.value）
+相应的css类别忘了浏览器中也有字体大小设置。更不用说缩放了。我喜欢
var（）
方法，
zoom
我绝对不会推荐它。你会在
document.documentElement.style
上修改
--基本大小吗？虽然我还没有测试过，但我认为document.documentElement是一个不错的选择。我个人也使用过document.body，根据我的经验，它也可以很好地工作。看起来这是在使用CSS预处理器。因此，如果用户试图实时更改字体大小，这将不起作用，因为预处理器只编译为CSS，而不在浏览器中运行。是的，这是SCSS。但同样的函数也可以用纯CSS编写。