Bootstrap 4 将文本大小调整为 div 响应答案

【问题标题】：Bootstrap 4 resize text into a div responsiveBootstrap 4 将文本大小调整为 div 响应
【发布时间】：2020-07-24 08:42:22
【问题描述】：

我正在尝试调整 div 内的文本大小，如下所示 example.

当我调整 div 的大小时，字体大小也必须调整。

我尝试使用具有所有相对长度单位的纯 css 设置文本元素，但不起作用。字体大小必须仅取决于 div 大小（因此 vw 不合适）。我认为唯一的选择是通过 javascript 设置字体大小。

<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: both;
  overflow: auto;
}
</style>

<div>
  <p style="font-size: 2rem">Hello World</p>
</div>

哪种方法最好，最好在 bootstrap 4 或纯 css 中？

【问题讨论】：

欢迎来到 Stack Overflow。请展示您尝试过的内容。这不是一个请求站点。考虑阅读以下内容：stackoverflow.com/help/how-to-ask 和 stackoverflow.com/help/minimal-reproducible-example
显示你的css和html
不要认为你可以用 B4 或纯 CSS 做到这一点。认为你必须使用JS

标签： css bootstrap-4

【解决方案1】：

看看这个问题。 Onresize for div elements?

你可以改变这个：

var myElement = document.getElementById('my_element'),
    myResizeFn = function(){
        /* do something on resize */
    };
addResizeListener(myElement, myResizeFn);
removeResizeListener(myElement, myResizeFn);

进入

 var myElement = document.getElementById('my_element'),
    myResizeFn = function(){
        document.getElementById(*ID OF OBJECT*).style.fontSize = "20%"; //use % or vh/vw f.e.

    };
addResizeListener(myElement, myResizeFn);
removeResizeListener(myElement, myResizeFn);

【讨论】：