调整容器内的字体文本（内部多个div）以适合完美

Question

因此，我在页面的容器内有一个div矩阵，每个div都显示'1'或'0'。

如果我把我的容器的100％和高度的宽度以适应我的页面的底部，我希望能够 规模容器的申报单（0的数量内的所有1的和0的并且1将是一个静态数字，为了这个问题，我们可以使用100来放置），无论浏览器大小调整到何种大小，都能完美地适应容器，因此它适合容器的宽度和高度，完美无缺任何尾随的空白或元素会离开页面或触发滚动条。

的目标是确保字体大小以适合容器内准确，不论屏幕尺寸（高度和宽度）的。

我看到的堆栈溢出多个类似的问题，如：JavaScript Scale Text to Fit in Fixed Div，但他们似乎都规模从我的合并的div文本的某一行，而不是文字。 有没有一种方法可以在JavaScript中做到这一点？

如果您看到This Question中正在询问什么，这就是我想要的 。 Q的区别在于他在1格内使用了一些 文本而不是多个文本来适应他的容器。

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

这个项目也是在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>

Answer 2

可以缩放每个元素，然后根据新的刻度位置左值。

https://jsfiddle.net/f6Lfe8hv/2/

var total_width = 0; 
 
var total_left = 0; 
 
var $divs = $('#binaryMatrix>div'); 
 
var $binaryMatrix = $('#binaryMatrix'); 
 
var scale = 1; 
 

 
$divs.each(function() { 
 
    total_width += $(this).width(); 
 
}); 
 

 
function full_width() { 
 

 
    scale = $binaryMatrix.width()/total_width; 
 

 
    $divs.css('transform', 'scale(' + scale + ')'); 
 

 
    $divs.each(function() { 
 

 
    $(this).css('left', total_left); 
 

 
    total_left += $(this).width() * 1; 
 

 
    }); 
 

 
    total_left = 0; 
 
} 
 

 
full_width(); 
 

 
$(window).resize(function() { 
 

 
    full_width(); 
 

 
})

#binaryMatrix div { 
 
    position: absolute; 
 
    transform-origin: left; 
 
} 
 

 
#binaryMatrix { 
 
    top:0; 
 
    left:0; 
 
    background: pink; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="binaryMatrix" style="width: 100%; height: 100%;"> 
 

 
    <div>some_test_value</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>another_test_value</div> 
 

 
</div>

Answer 3

我决定有另一个去这个 - 不仅是因为它是一个令人着迷的问题。

我想我已经破解了它。

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

 
var largestNumberOfRows = 12; 
 

 
for (var i = largestNumberOfRows; i > 0; i--) { 
 
    if (binaryMatrixDivs.length % i === 0) { 
 
     var numberOfRows = i; 
 
     break; 
 
    } 
 
} 
 

 
function changeDivWidth() { 
 
    for (var i = 0; i < binaryMatrixDivs.length; i++) { 
 
    var divWidth = (100/(binaryMatrixDivs.length/numberOfRows)); 
 
    var divHeight = (100/numberOfRows); 
 

 
    binaryMatrixDivs[i].style.width = divWidth + 'vw'; 
 
    binaryMatrixDivs[i].style.height = divHeight + 'vh'; 
 
    binaryMatrixDivs[i].style.lineHeight = divHeight + 'vh'; 
 
    } 
 
} 
 

 
window.addEventListener('load',changeDivWidth,false);

body { 
 
margin: 0; 
 
padding: 0; 
 
} 
 

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

 
#binaryMatrix div { 
 
display: inline-block; 
 
float: left; 
 
width: 0; 
 
height: 0; 
 
line-height: 20vh; 
 
text-align: center; 
 
} 
 

 
#binaryMatrix div:nth-of-type(odd) { 
 
background-color: rgb(191,191,191); 
 
} 
 

 
#binaryMatrix div:nth-of-type(even) { 
 
background-color: rgb(127,127,127); 
 
}

<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>

---

注：

1）可以通过改变numberOfRows值确定的行数。如果numberOfRows设置为5，那么总会有为5行 - 无论窗口多短或高或者宽或窄。 2）很明显，你会想要numberOfRows成为您拥有的div数量的一个因素。因此，5行，如果你有100点的div或90个div的，但是如果你有96个div的，你会想numberOfRows为4或6或12或96

---

改进的一些其他因素是良好的：

上述两个注意事项是必需的，因为在脚本的第一个版本中，有来手动声明行数。在脚本的第二个版本中（如上所述），如果您愿意，您仍然可以手动声明行数，但只需手动声明您希望查看的最大行数（例如，不超过14行），脚本将从14 开始倒数​​，直到找到一个因子 - 并且它的第一个因子将是numberOfRows。

这将使您能够更改div的数量（手动或动态），而无需每次重置numberOfRows。