调整容器内的字体文本(在多个div内)以完全适合

Question

所以我在页面的容器中有一个div矩阵,每个div显示'1'或'0'.

如果我将容器设置为100%的宽度和高度以适合我的页面底部,我希望能够扩展容器的div中的所有1和0(0和1的数量将是一个静态数字) ,为了这个问题,让我们一起使用100)无论浏览器的大小调整到什么大小都能完美地容纳容器,所以它完全适合容器的宽度和高度,没有任何尾随的空白区域或元素熄灭页面或触发滚动条.

无论屏幕大小(高度和宽度)如何,目标都是确保字体调整大小以适应容器.

我已经看到有关堆栈溢出的多个类似问题,例如:JavaScript Scale Text适合固定Div,但它们似乎都缩放了某一行文本而不是我的组合div中的文本.有没有办法在JavaScript中做到这一点？

如果您看到本课题中的要求,这正是我想要的.Q的不同之处在于他使用1 div内的一些文本而不是多次来装入他的容器.

这是我的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;
}

见小提琴:小提琴

这个项目也在GitHub上: GitHub - danjonescidtrix/binary-matrix

---

感谢您的任何帮助或建议,谢谢您提前

Answer 1

正确的。第三次尝试（这次我确实破解了）。

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

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

现在我们需要做的就是解决：

1. 数字的大小仅font-size取决于视口的宽度；和
2. 数字的大小仅font-size取决于视口的高度；

较小者可以应用于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>