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; 
}