通过 vh 和 vw 调整 css 字体大小答案

【问题标题】：adjusting css font size by vh and vw通过 vh 和 vw 调整 css 字体大小
【发布时间】：2018-05-20 16:24:59
【问题描述】：

所以我有想要根据容器大小自动调整大小的文本。但是，如果我使用类似的东西

font-size: 5vw;

看起来不错，但是当我缩小页面时，高度开始变得太小了

我是否可以根据 vh 和 vw 调整文本大小，例如，如果我只是减小页面的宽度，那么高度也不会减小？

如果我只减小页面的宽度，我希望文本的高度保持不变，反之亦然。

基本上，无论页面/容器的大小如何，我都希望文本始终完美地放入框内并具有相同的比例？

在 CSS/HTML 中是否有像这样基于 vh 和 vw 的字体大小？

【问题讨论】：

我不认为基于窗口大小的字体大小是个好主意...可能会在移动设备上引起一些问题
您希望字体高度保持不变而宽度缩小吗？或者，您可以将vmax 用于单位吗？
您是否只是想防止您的文本溢出您的容器 div？请向我们展示一个代码示例，以便我们为您提供帮助？
基本上网站布局是从 JSON 配置创建的，用户可以选择屏幕的百分比大小来制作不同的 div 元素。它不会在移动设备上，而是一个独立的终端/树莓派。所以我需要能够根据用户选择制作 div 元素的大小来调整文本大小。所以我说的是我知道我可以基于 vw 或 vh 但例如，如果我使用 vw 并缩小 div 部分，高度也会缩小我希望文本基于高度和宽度而不是其中一个

标签： html css font-size viewport-units

【解决方案1】：

我已经使用 vw 有一段时间了。我通常首先为移动设备使用更大的 vw（任何低于 700 像素的视口）。然后，我将高于 700 像素视口的所有内容调整为适合所有 vw 值的大小。再加上 bootstrap 易于使用的 flexbox 类，css 内容的开销要少得多。

【讨论】：

【解决方案2】：

您可以查看vmin 和vmax 单位。

1vw 将返回 1% 的视口宽度，1vh 将返回 1% 的视口高度，1vmin 将返回 1% 的最小视口尺寸，无论是视口宽度 (@987654327 @) 或其高度 (vh)。同样，1vmax 将返回最大视口尺寸的 1%。

为了使整个容器（包括其文本）保持其纵横比，您必须对容器尺寸及其字体大小应用相同类型的单位。

在全页模式下查看以下示例并调整窗口的宽度和高度：

p {
  width: 80vmin;
  font-size: 6vmin;
}

&lt;p&gt;Try resizing both the width and height of the output frame. The &amp;lt;p&amp;gt; element and its contents will both respond to whichever dimension is the smallest.&lt;/p&gt;

注意

Internet Explorer 11 和 Edge 12 不支持 vmax 单元。更多关于浏览器支持here.

【讨论】：