我想有一些文本填充整个浏览器窗口，但不超出窗口，即我想所有的文本是可见的，并希望字体大小动态调整，以说明这一点。
我所能完成的最接近的是一个flexbox，使用这个CSS:
.textBox {
display: flex;
color: white;
background-color: blue;
font-size: 10vw;
position: absolute;
top: 0;
width: 100vw;
height: 100vh
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles/styles-wearer.css">
</head>
<body>
<div class='textBox'>
some cool text that is a whole bunch of cool text. we love great text. all the text in the world and i have a great time getting text to be in this place. it is not enough but at least we have some text.
</div>
</body>
</html>这适用于小窗口，例如，如果我通过在Chrome中打开Javascript控制台来减小窗口大小。但是随着窗口尺寸的增大，文本最终会变得非常大，以至于被截断，其中一些不再可见。
是否有一种方法来确保，作为flexbox改变大小，字体大小调整，以确保所有的文本留在屏幕上?还是我错误地设置了flexbox的大小，它实际上比浏览器窗口更大?
尝试使用vmin作为字体大小单位，并夹住字体大小以方便访问
.textBox{
background-color: blue;
color: white;
font-size: clamp(1rem, 10vmin, 6rem);
padding: 2rem;
position: absolute;
inset: 0;
display: flex;
align-items: center;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles/styles-wearer.css">
</head>
<body>
<div class='textBox'>
some cool text that is a whole bunch of cool text. we love great text. all the text in the world and i have a great time getting text to be in this place. it is not enough but at least we have some text.
</div>
</body>
</html>您不应该将vw或vmin单元单独与font-size一起使用-这可能会产生可访问性问题，特别是在手机上。当有视力问题的用户捏手机屏幕放大时，字体保持不变。
要有一个可访问的解决方案，你应该使用clamp()来组合rems(理想情况下)或类似的，并将vw作为属性的"流体"中间值。
.text-box {
font-size: clamp(2rem, 6vw, 4rem);
}