根据容器的宽度和高度缩放字体大小
因此，我正在尝试为我的 HTML 文档进行更具响应性的设计，我想要排序的第一件事是根据容器的高度和宽度缩放字体大小。现在我有以下内容：
我进行了一些研究，发现 css 中的单位“vw”允许字体根据容器进行缩放，但我只是注意到它仅在我调整浏览器宽度时才有效，如下所示：
如图所示，如果我调整浏览器宽度大小，文本确实会缩放，但是，我意识到当我调整浏览器高度时，它根本不会缩放。
如何确保文本根据容器的宽度和高度进行缩放？
html,body {
height: 100%;
}
.outer {
height: 50%;
border: 1px solid black;
width: 50%;
}
#cat1 {
height: 50%;
border: 1px solid black;
font-size: 3vw;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#cat2 {
height: 50%;
border: 1px solid black;
font-size: 3vw;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div class = "outer">
<div id = "cat1">
This is text1
</div>
<div id = "cat2">
This is text2
</div>
</div>
</body>
</html>虽然font-sizeCSS 属性可以采用无单位数字、百分比或相对单位长度，但所有这些都是相对于父元素的font-size. 即使您使用 CSScalc函数，任何测量都将被理解为父元素的比率font-size，而不是元素的宽度或高度。
唯一的例外是rem和ren单位，它们相对于<html>元素的font-size、 和vw单位vh，分别是视口宽度和高度的百分比。换句话说，100vh是窗口的高度，100vw是窗口的宽度。Red Blob Games 有一篇关于使用单位进行响应式字体大小调整的有趣文章vw，我建议您阅读一下。
您可以使用CSS 转换来缩放元素的渲染大小，但这可能会使文本显得模糊或拉伸，这在尝试使网站具有响应性和可访问性时绝对不是您想要的。
长话短说，没有仅 CSS 的方法可以设置相对于元素大小的字体大小。如果您确实想这样做，则必须使用 JavaScript 计算元素的大小（以像素为单位），然后将值传递px给font-sizeCSS 属性。
但到那时，您将积极反对网络的工作方式：元素会拉伸以适应其内容，而不是相反。
Har*_*aye -2
编辑：这种方法可能是错误的。这会将字体大小设置为继承字体大小的一部分，而不是父元素的宽度/高度。
请检查一下：
旧答案
使用 em 单位代替 vw。
html,body {
height: 100%;
}
.outer {
height: 50%;
border: 1px solid black;
width: 50%;
}
#cat1 {
height: 50%;
border: 1px solid black;
font-size: .5em;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#cat2 {
height: 50%;
border: 1px solid black;
font-size: 1em;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div class = "outer">
<div id = "cat1">
This is text1
</div>
<div id = "cat2">
This is text2
</div>
</div>
</body>
</html>