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

这样，字体大小将始终等于视口宽度的2％。

您还可以通过混合calc()：

来提供一种“最小字体大小”

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

我还建议您从position: absolute中删除headerTitle，除非您发布的内容超出了您的要求。然后，您可以从容器中删除min-height并允许它自然地调整大小。除非你有特定的理由这样做，否则不要定位元素，否则你会遇到各种奇怪的边缘情况。

Div和Text调整大小以保持比率

1 个答案: