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，并让其自然调整大小。除非你有特定的理由这样做，否则不要定位元素，否则你会遇到各种奇怪的边缘情况。