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

Question

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

font-size: 5vw;

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

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

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

基本上，我希望文本始终完美地适合框内，并且无论页面/容器的大小是多少，都具有相同的比例？

无论如何，有没有像 CSS/HTML 中的 vh 和 vw 一样基于 vh 和 vw 的字体大小？

Answer 1

您可以查看vmin和vmax单位。

虽然1vw将返回视口宽度的 1%，并将1vh返回视口高度的 1%，1vmin但将返回最小视口尺寸的 1%，无论是视口宽度 ( vw) 还是高度 ( vh)。同样1vmax将返回最大视口尺寸的 1%。

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

请参阅以下全页模式示例并调整窗口宽度和高度：

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

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

笔记

Internet Explorer 11 和 Edge 12 不支持本vmax机。有关浏览器支持的更多信息请参见此处。