如何根据全宽 div 调整动态文本的大小答案

【问题标题】：How to size a dynamic text based a full width div如何根据全宽 div 调整动态文本的大小
【发布时间】：2020-03-30 14:57:45
【问题描述】：

我正在尝试根据父 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;
}

【问题讨论】：

stackoverflow.com/questions/16056591/…的可能重复
@palash 我不这么认为。我正在尝试根据 div 动态调整文本的大小，不仅使其具有响应性
试试这个：jsfiddle.net/2rp1q0sy

标签： javascript css reactjs sass

【解决方案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;
}

请注意，您应该仅将其用于媒体查询，否则文本将在大屏幕上放大。

【讨论】：