如何使 flexbox 中的文本始终适合视口？

Question

我想让一些文本填充整个浏览器 window 但不要超出 window，即我希望所有文本都可见并且希望字体大小能够动态调整考虑到这一点。

我能完成的最接近的是使用 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>

这适用于小型 windows，例如如果我通过在 Chrome 中打开 Javascript 控制台来减小 window 大小。但是随着 window 大小的增长，文本最终会变得如此之大以至于被截断并且其中一些不再可见。

有没有办法确保在 flexbox 改变大小时，字体大小也会调整以确保所有文本都保留在屏幕上？还是我错误地设置了 flexbox 的大小，它实际上比浏览器大 window?

Answer 1

尝试使用 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>

Answer 2

您不应将 vw 或 vmin 单元与 font-size 单独使用 - 它会造成可访问性问题，尤其是在 phone 上。当有视力问题的用户捏住他们的 phone 屏幕以放大时，字体保持相同大小。

要获得可访问的解决方案，您应该使用 clamp() 组合 rems（理想情况下）或类似的，并将 vw 作为属性的 'fluid' 中间值。

.text-box {
  font-size: clamp(2rem, 6vw, 4rem);
}

如何使 flexbox 中的文本始终适合视口？

How to make text in flexbox always fit inside viewport?

html

css

flexbox