Div和Text一起調整大小以保持比例

Question

我有一個帶有頭部的div。該div調整與瀏覽器，但文字保持相同的大小，並沒有正確調整大小。

.header { 
 
     min-width:100%; 
 
    \t min-height:13%; 
 
    \t position: fixed; 
 
    \t margin:auto; 
 
    \t top: 0; 
 
    \t z-index: 1; 
 
    \t background: rgb(0, 0, 0); 
 
    \t background: rgba(0, 0, 0, 0.7); 
 
    } 
 
    
 
    .headerTitle { 
 
    \t left: 0; 
 
    \t width:100%; 
 
    \t height:100%; 
 
    \t position: absolute; 
 
    \t color:black; 
 
    \t font: bold 24px/45px Helvetica, Sans-Serif; 
 
    \t letter-spacing: -1px; 
 
    \t margin-left: 3%; 
 
    \t font-size: 500%; 
 
    }

<div id="homepageHeader" class="header"> 
 
\t \t <h1 id="homepageHeaderTitle" class="headerTitle">Text Here</h1> 
 
\t \t <!-- insert menu buttons here --> 
 
\t </div>

Answer 1

如果你希望文字響應規模，嘗試定義使用viewport units字體大小：

.headerTitle { 
    font-size: 2vw; 
} 

這樣的字體大小將視口總是等於2％寬度。

您還可以通過在calc()混合提供一種「最小字體大小」的：

.headerTitle { 
    font-size: calc(0.5em + 2vw); 
} 

---

我也建議你從headerTitle刪除position: absolute除非有一些超出你發佈什麼在這裏這需要它。然後，您可以從容器中取出min-height，並讓其自然調整大小。除非你有特定的理由這樣做，否則不要定位元素，否則你會遇到各種奇怪的邊緣情況。