如何使用javascript将给定类realive的每个元素的字体缩放到其父维度？

我正试图建立我的第一个响应性网站，我遇到了一些问题

特别是，我需要一些文本居中，但当我在FireFox Dev Edition中尝试不同的窗口大小和响应设计模式时，居中的文本实际上并不适合它的容器。因此，我认为JavaScript可能是最好的做法

而这适用于使用

document.getElementById（'id'）选择的元素，我似乎无法通过使用
for
循环使其与类一起工作

下面是我用于ID为的元素的代码：

document.getElementById（'header-text'）.style.fontSize=（（19/47.73）*document.getElementById（'header-title'）.getBoundingClientRect（）.height）.toString（）.concat（'px'）；

下面是我尝试使用公共类来处理元素的内容

var allIconLinks=document.getElementsByClassName（'extras-iconlink-text'）；
var i；
对于（i=0；i>allIconLinks.length；i++）{
allIconLinks[i].style.fontSize=（19.2/42.43）*allIconLinks[i].parentElement.getBoundingClientRect（）.height.toString（）.concat（'px'）；
}

值得注意的是，for循环中根本没有执行任何操作，我尝试使用
console.log
函数，但没有记录任何操作

如果有帮助的话，下面是元素的HTML和CSS（我没有在这段代码中显示，但我有
）：


卡拉卡拉斯投资组合
关于
开发项目

#标题{
最高：0%；
左：0%；
宽度：100%；
身高：7.5%；
背景色：#7161ef；
位置：固定；
}
#标题#标题标题{
最高：5%；
左：0.15%；
宽度：20%；
身高：90%；
背景色：透明；
位置：绝对位置；
}
#标题#标题#标题文本{
显示器：flex；
最高：5%；
左：25%；
宽度：80%；
身高：90%；
证明内容：中心；
弯曲方向：立柱；
背景色：继承；
空白：nowrap；
位置：绝对位置；
字体系列：“ComfortaBold”；
字体大小：120%；
}
#标题#标题附加内容{
最高：5%；
左：22.65%；
宽度：77.25%；
身高：90%；
背景色：透明；
位置：绝对位置；
}
#标题#标题附加。附加图标链接{
显示：内联块；
排名前10%；
宽度：4%；
身高：80%；
背景色：继承；
位置：绝对位置；
}
#标题#标题附加。附加图标链接。附加图标链接文本{
显示器：flex；
最高：0%；
左：100%；
宽度：250%；
身高：100%；
证明内容：中心；
弯曲方向：立柱；
背景色：继承；
空白：nowrap；
位置：绝对位置；
字体系列：“ComfortaBold”；
字体大小：120%；
}

我确信我犯的错误是非常愚蠢和明显的，我并不经常做Web开发，我主要是用Lua做gamedev

非常感谢您的帮助
 您可能不需要使用JavaScript来集中精力。这主要是一个由CSS很好地处理的表示问题。我建议您转到这两个链接，看看在每种情况下您可以使用什么，具体取决于您需要集中哪些内容。这本书不长


您可以根据窗口大小设置字体大小。
例如，要在低于600px的所有屏幕上设置20px的字体大小，您可以使用以下CSS：

@media (max-width: 600px) {
#header {
    font-size: 20px;
}}

我想值得一提的是，问题主要是字体没有随窗口大小缩放，而不是它没有居中-天哪，我觉得很愚蠢，因为我给这个线程的标题完全错了。你可能想用REM单位来表示你的字体大小。它们与大多数web浏览器的默认值或HTML元素字体大小有关，您可以更改这些字体大小，这些字体大小将反映在HTML页面的所有rem单元中。默认情况下，1rem等于16px，2rem等于32px，等等。您可以在更多元素中使用REM单位，而不仅仅是fon大小。试试看。关于REM的更多信息[CSS REM单元不仅仅是字体大小][1][1]：问题是：如何使用JavaScript根据给定类相对于其父维度来缩放每个元素的字体？如果要更改单个值以影响所有字体和某些元素大小，我建议在REM中设置尺寸、字体和元素，并设置JavaScript代码以更改HTML字体大小。默认情况下，它将是16px=1rem。我只是根据你的问题澄清我以前的答案。希望能有帮助。