字体大小基于视口宽度和高度

Posted 2023-03-06

【中文标题】字体大小基于视口宽度和高度

【英文标题】：font-size based on BOTH viewport width & height

【发布时间】：2017-06-10 16:57:06

【问题描述】：

我会保持简短直接，所以我明白：

VW 根据视口宽度更改字体大小。

VH 根据视口高度更改字体大小。

我的问题是；

有没有办法根据视口宽度和高度来缩放我的字体大小？ 因此，更改浏览器的高度和宽度会适当地缩放我的字体大小。

我问是因为我想将我的文本大小适当地缩放到它们所在的容器，我的问题是容器缩放到 100% 宽度和 100% 高度。所以根据高度和宽度缩放文本大小似乎是合乎逻辑的，除非有办法根据其父容器的尺寸来调整大小？

---

感谢任何帮助或建议，在此先感谢您

我尝试使用百分比并查看了各种字体大小调整语法，但我似乎找不到任何可以根据宽度缩放的内容 和身高，这是有原因的吗？

【问题讨论】：

更多信息请参见此处：css-tricks.com/almanac/properties/f/font-size。字体大小是静态的，基于静态单位或相对于父单位，它不会根据其容器的宽度或高度而改变。事实上，字体在这种方式上是相当严格的。但是您可以根据 vh 或 vw 调整它们的大小，这篇文章展示了如何：css-tricks.com/viewport-sized-typography。您还可以使用 FitText.js 模拟响应式字体大小调整：fittextjs.com

【参考方案1】：

看看vmin和vmax。

1vmin = 1vw 或 1vh，以较小者为准 1vmax = 1vw 或 1vh，以较大者为准

【讨论】：

我怎么没看到这个！非常感谢。

请注意将vmax 用于IE caniuse.com/#feat=viewport-units @danjonescidtrix