html - Div 和 Text 一起调整大小以保持比例

Question

我有一个带有标题的 div。 div 随浏览器调整大小，但文本保持相同大小并且未正确调整大小。

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

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

Answer 1

如果您希望文本响应缩放，请尝试使用 viewport units 定义字体大小:

.headerTitle {
  font-size: 2vw;
}

这样字体大小将始终等于视口(viewport)宽度的 2%。

您还可以通过混合 calc() 来提供一种“最小字体大小”:

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

---

我还建议您从 headerTitle 中删除 position: absolute 除非您在此处发布的内容之外还有其他内容需要它。然后您可以从容器中删除 min-height 并让它自然调整大小。除非有特殊原因，否则不要定位元素，否则你会遇到各种奇怪的边缘情况。