javascript - 调整容器内的字体文本(在多个 div 内)以完美适应

Question

所以我在页面的容器中有一个 div 矩阵，每个 div 显示“1”或“0”。

如果我将我的容器设置为 100% 的宽度和高度以适合我的页面底部，我希望能够 缩放容器 div 内的所有 1 和 0(0 和 1 的数量将是一个静态数字，为了这个问题让我们选择 100)到无论浏览器大小调整到什么大小，总是完美适合容器，所以它适合宽度和 容器的高度完全没有任何尾随空白或离开页面或触发滚动条的元素。

The goal is to make sure the fonts resize to fit within the container exactly, regardless of screen size (both height and width).

我看到过多个关于stack overflow的类似问题，比如:JavaScript Scale Text to Fit in Fixed Div ，但它们似乎都缩放了某一行文本，而不是我组合的 div 中的文本。 我可以在 JavaScript 中执行此操作吗？

If you see what is being asked for in This Question, this is exactly what I want. The difference in that Q is that he uses some text within 1 div rather than multiple to fit his container.

这是我的 HTML:

<div id="binaryMatrix" style="width: 100%; height: 100%;">
    <div>0</div>
    <div>1</div>
    <div>0</div>
    <div>1</div>
    <div>0</div>
    <div>1</div>
    <div>0</div>
    <div>1</div>
    ...up to 100
 </div>

这是我的 CSS:

#binaryMatrix div {
    float: left;
}

参见 fiddle :Fiddle

这个元素也在 GitHub 上: GitHub - danjonescidtrix/binary-matrix

---

如有任何帮助或建议，在此先感谢您

Answer 1

没错。第三次尝试(这次我真的确实破解了它)。

位数是静态的。我们称它为 100 位数字。

数字的高度大于宽度，因此我们需要一个高而窄的 div 网格。 10x10 不好。让我们设置一个 20x5 网格。

现在我们需要做的就是锻炼:

1. font-size 的数字有多大仅基于视口(viewport)的宽度；和
2. font-size 的数字有多大仅基于高度 视口(viewport);

以较小者为准font-size应用于数字。

var binaryMatrix = document.getElementById('binaryMatrix');
var binaryMatrixDivs = binaryMatrix.getElementsByTagName('div');

function applyNewFontSize() {

    var newVerticalFontSize = (window.innerHeight / 5.5);
    var newHorizontalFontSize = (window.innerWidth / 20.5);
    var newFontSize = (newVerticalFontSize > newHorizontalFontSize ? newHorizontalFontSize : newVerticalFontSize);

    for (var i = 0; i < binaryMatrixDivs.length; i++) {
    binaryMatrixDivs[i].style.fontSize = newFontSize + 'px';
    binaryMatrixDivs[i].style.lineHeight = newFontSize + 'px';
    }

}

window.addEventListener('resize',applyNewFontSize,false);
window.addEventListener('load',applyNewFontSize,false);

body {
margin: 0;
padding: 0;
}

#binaryMatrix {
width: 100vw;
height: 100vh;
}

#binaryMatrix div {
display: inline-block;
float: left;
width: 5vw;
height: 20vh;
text-align: center;
color: rgb(163,163,163);
}

<div id="binaryMatrix">
<div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div>
</div>