JS - 根据DIV大小调整字体大小

Question

我有一个div class =“container”和一个“p”元素。 是否有一个简单的JS方法来调整字体大小取决于父DIV widht和高度？ 请找到以下代码。

<div class="container">
<p>Some text here</p>
</div>

整个想法是创建一个CSS模板，以快速将div添加到HTML代码。

该项目旨在创建类似于Windows Phone的布局，其中包含更大和更小的矩形和正方形。

现在，因为每个div可能有不同的维度，因此，为了避免为每个div设置字体参数，我想添加JS脚本，按比例（％）根据大小改变字体大小div（但考虑到宽度和高度都可以改变）。

请注意，设置div后，不会通过调整浏览器窗口大小来改变维度，因此在CSS中使用“vw”和“vh”参数可能不是正确的方法。

感谢。

Answer 1

您可以使用此代码：

div {
    width: 100vw;
    height: 100vh;
    margin: auto;
    font-size: 50vw;
    text-align: center;
}