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

我有一个有标题的div。div会随浏览器调整大小，但文本大小保持不变，无法正确调整大小

.header{
最小宽度：100%；
最小高度：13%；
位置：固定；
保证金：自动；
排名：0；
z指数：1；
背景：rgb（0,0,0）；
背景：rgba（0,0,0,0.7）；
}
.海德特尔{
左：0；
宽度：100%；
身高：100%；
位置：绝对位置；
颜色：黑色；
字体：粗体24px/45px Helvetica，无衬线；
字母间距：-1px；
左缘：3%；
字体大小：500%；
}

此处文本

如果您希望文本按相应比例缩放，请尝试使用以下方法定义字体大小：

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

您还可以通过混合使用

calc（）

，提供某种“最小字体大小”：

---

---

我还建议您从

标题

中删除

位置：绝对

，除非您在此处发布的内容以外的内容需要它。然后，您可以从容器中移除

min height

，并使其自然调整大小。除非您有特定的理由，否则不要定位元素，否则您将遇到各种奇怪的边缘情况。

根据您的评论，下面是一篇利用SASS功能的优秀文章：

.headerTitle {
  font-size: 2vw;
}

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