如何根據全寬 div 調整動態文本的大小

Question

我正在嘗試根據父 div 縮放文本。 我正在使用 reactjs 並且我嘗試使用 react-textfit 包，但是字體大小以像素為單位定義，因此無法響應。

記住文本是動態的。 我不知道每個人會有多少個字母

我在https://jsfiddle.net/2hsz16q8/6/ 中做了這個例子

在這里，我使用第二個類做到了，但是，我想動態地做到這一點。

HTML：

<ul>
 <li>
  <div>
   <h1 id="dynamic-text-1">Why do we use it?</h1>
  </div>
 </li>
 <li>
  <div>
   <h1 id="dynamic-text-2">Where does it come from?</h1>
  </div>
 </li>
</ul>

CSS：

#dynamic-text-1 {
  font-size: 4em;
}

#dynamic-text-2 {
  font-size: 2.9em;
}

div {
  border: 1px solid red;
  width: 70vw;
}

Answer 1

您可以使用vw作為font-size而不是em 、 rem 、 %或px 。 這樣字體會根據瀏覽器的寬度而改變，它不會與瀏覽器相關，而是與屏幕大小相關。

HTML

<ul>
  <li>
    <div>
      <h1 id="text-2">Why do we use it?</h1>
    </div>
  </li>
  <li>
    <div>
      <h1 id="text-1">Where does it come from?</h1>
    </div>
  </li>
</ul>

CSS

h1 {
  font-size: 2vw;
}

div {
  border: 1px solid red;
  width: 70vw;
}

請注意，您應該僅將其用於媒體查詢，否則文本將在大屏幕上放大。