JS - 取决于DIV大小

Question

我有一个div类=“容器”和它的内部的“p”的元件调整大小的字体。 是否有一个简单的JS方法来调整字体的大小取决于父DIV的widht和height？ 请找到下面的代码。

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

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

该项目是建立类似于Windows Phone采用更大和更小的长方形和正方形的布局。

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

请注意，div的，一旦设定，不会调整浏览器窗口改变dimentions，因此使用“大众”和CSS“VH”参数可能不是一个正确的做法。

谢谢。

Answer 1

您可以使用此代码：

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