如何使用 javascript 相对于其父尺寸缩放具有给定 class 的每个元素的字体？

Question

我正在尝试制作我的第一个响应式网站，但我运行遇到了一些问题。

特别是，我需要一些文本居中，但是当我在 FireFox Dev Edition 中使用响应式设计模式尝试不同的 window 大小时，居中的文本不会真正适合其容器。所以，我认为 JavaScript 可能是最好的行动方案。

虽然这适用于使用 document.getElementById('id'); 选择的元素，但我似乎无法通过使用 for 循环使其与类一起使用。

这是我用于具有 ID 的元素的代码：

document.getElementById('header-text').style.fontSize = ((19/47.73) * document.getElementById('header-title').getBoundingClientRect().height).toString().concat('px');

以下是我尝试使用通用 CLASS.

与元素一起使用的内容

var allIconLinks = document.getElementsByClassName('extras-iconlink-text');
var i;
for ( 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（我没有在此片段中显示，但我确实有 <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />）：

<body>
 <div id = 'header'>
  <div id = 'header-title'>
   <span id = 'header-icons'>
    <img id = 'icon-layer1' src = '../../assets/logos/layer1.svg'>
    <img id = 'icon-layer2' src = '../../assets/logos/layer2.svg'>
   </span>
   <span id = 'header-text'>Karakaras Portfolio</span>
  </div>
   <div id = 'header-extras'>
    <span id = 'extras-info' class = 'extras-iconlink'>
     <img id = 'icon-info' src = '../../assets/icons/info.svg'>
     <span class = 'extras-iconlink-text'>About</span>
    </span>
    <span id = 'extras-projects' class = 'extras-iconlink'>
     <img id = 'icon-info' src = '../../assets/icons/projects.svg'>
     <span class = 'extras-iconlink-text'>Dev projects</span>
    </span>
   </div>
 </div>
</body>

#header {
 top: 0%;
 left: 0%;
 width: 100%;
 height: 7.5%;
 background-color: #7161ef;
 position: fixed;
}
#header #header-title {
 top: 5%;
 left: 0.15%;
 width: 20%;
 height: 90%;
 background-color: transparent;
 position: absolute;
}
#header #header-title #header-text {
 display: flex;
 top: 5%;
 left: 25%;
 width: 80%;
 height: 90%;
 justify-content: center;
 flex-direction: column;
 background-color: inherit;
 white-space: nowrap;
 position: absolute;
 font-family: 'comfortaabold';
 font-size: 120%;
}
#header #header-extras {
 top: 5%;
 left: 22.65%;
 width: 77.25%;
 height: 90%;
 background-color: transparent;
 position: absolute;
}
#header #header-extras .extras-iconlink {
 display: inline-block;
 top: 10%;
 width: 4%;
 height: 80%;
 background-color: inherit;
 position: absolute;
}
#header #header-extras .extras-iconlink .extras-iconlink-text {
 display: flex;
 top: 0%;
 left: 100%;
 width: 250%;
 height: 100%;
 justify-content: center;
 flex-direction: column;
 background-color: inherit;
 white-space: nowrap;
 position: absolute;
 font-family: 'comfortaabold';
 font-size: 120%;
}

我敢肯定我犯的错误非常愚蠢和明显，我真的不怎么做 Web 开发，我主要用 Lua 做游戏开发。

非常感谢所有帮助！

Answer 1

您可能不需要使用 JavaScript 来居中。这主要是 CSS 很好地处理的演示问题。我建议您转到这两个链接，看看在每种情况下您可以使用什么，具体取决于您需要居中的内容。不是很长的阅读。

text-align

Centering in CSS: A complete guide

Answer 2

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

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

如何使用 javascript 相对于其父尺寸缩放具有给定 class 的每个元素的字体？

How do I scale the font of every element with a given class realitive to its parents dimensions using javascript?

html

javascript

css

responsive-design