字體大小基於視口寬度和高度

Question

我會保持簡短和直截了當，所以我明白：

• VW 根據視口寬度更改字體大小。

• VH 根據視口高度更改字體大小。

我的問題是；

有沒有辦法根據視口寬度和高度來縮放我的字體大小？ 因此，更改瀏覽器的高度和寬度會適當地縮放我的字體大小。

我問是因為我想將我的文本大小適當地縮放到它們所在的容器，我的問題是容器縮放到 100% 寬度和 100% 高度。 因此，基於高度和寬度縮放文本大小似乎是合乎邏輯的，除非有辦法根據其父容器的尺寸來調整大小？

---

任何幫助或建議表示贊賞，在此先感謝您

我嘗試使用百分比並查看了各種字體大小語法，但我似乎找不到任何基於寬度和高度縮放的東西，這是有原因的嗎？

Answer 1

看看vmin和vmax 。

• 1vmin = 1vw或1vh ，以較小者為准
• 1vmax = 1vw或1vh ，以較大者為准

Answer 2

還有另一種解決方案，但需要進行一些計算。 我必須將文本放置在一些預先設計的空間中，它的視口大小是 300 * 200 像素。 它可以調整大小以適應另一個容器。 字體大小選擇為 18px。

因此，為了將字體大小轉換為相對於視口的大小：

[font size]*100/[viewport size]

18*100/300 = 6vw
18*100/200 = 9vh

現在只需使用每種尺寸的一半：

font-size: calc(3vw+4.5vh);

而已。