根据容器的宽度和高度缩放字体大小[重复]
因此，我正在努力为我的HTML文档设计一个响应更快的设计，我想要排序的第一件事是根据容器的高度和宽度缩放字体大小。现在我有以下内容：
我研究了一下，在css中找到了“VW”这个单位，它允许字体根据容器进行缩放，但我注意到它只在我调整浏览器宽度时才起作用，这会得到如下结果：
如图所示，如果我调整浏览器的宽度，文本确实会缩放。但是，我意识到当我调整浏览器的高度时，它根本不会缩放。
我如何确保文本是基于容器的宽度和高度缩放的？
null
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>null
共有2个答案
虽然font-sizeCSS属性可以采用相对单位中的无单位数字、百分比或长度，但所有这些都是相对于父元素的font-size的。即使使用CSScalc函数，任何度量都将理解为父元素的font-size的比率，而不是元素的宽度或高度。
唯一的例外是rem和ren单位，它们相对于元素的font-size以及vw和vh单位，它们分别是视口宽度和高度的百分比。换句话说，100VH是窗口的高度，100VW是窗口的宽度。Red Blob Games有一篇关于使用vw单元进行响应式字体大小调整的有趣文章，我建议阅读一下。
您可以使用CSS转换来缩放元素的呈现大小，但这可能会使文本显得模糊或拉伸，这绝对不是您想要的，当试图使网站具有响应性和可访问性时。
长话短说，没有CSS唯一的方法来相对于元素的大小设置字体大小。如果您真的想这样做，就必须使用JavaScript以像素为单位计算元素的大小，然后将px值传递给font-sizeCSS属性。
但在这一点上，您将积极地与web的工作方式作斗争：元素伸展以适应它们的内容，而不是相反。
编辑：这种方法可能是错误的。这将将字体大小设置为继承字体大小的一部分，而不是父元素的宽度/高度。
请检查此内容：
- 仅使用CSS可能无法执行此操作。
- EM不是正确答案，因为它与父元素的字体大小有关，而不是它的高度或宽度。
旧答案
使用em单元而不是VW。
null
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>-
问题内容： 我很难理解字体缩放。 目前，我有这个网站与身体的100％。不过是100％这似乎可以计算出16个像素。 我给人的印象是100％会以某种方式引用浏览器窗口的大小，但是显然不是因为将窗口缩小到移动宽度还是全屏宽屏桌面总是16像素。 如何使网站上的文本相对于其容器而言？我尝试使用，但这也无法扩展。 我的理由是，当你调整，这东西像我的菜单中就被压扁，所以我需要降低 的相对其它元素的容器的宽度之中
-
我会保持简短直截了当，这样我就明白了： > vw根据视区宽度更改字体大小。 VH根据视区高度更改字体大小。 我的问题是； 有没有一种方法可以根据视区的宽度和高度来缩放我的字体大小？因此，改变浏览器的高度和宽度将适当地缩放我的字体大小。 我这样问是因为我想根据它们所在的容器适当地缩放我的文本大小，我的问题是容器缩放到100%的宽度和100%的高度。因此，根据高度和宽度来缩放文本大小似乎是合乎逻辑的，
-
问题内容： 我的元素： 风格： 脚本，使其保持方形： 问题是要在纯CSS中做同样的事情。没有脚本。 问题答案： 我知道有两种技术可以根据元素的高度保持元素的长宽比： 当 高度相对于视口时 ： 您可以使用vh单位： 对于 基于父元素的高度的高度 ： 您可以使用具有所需纵横比的虚拟图像。宽高比为1：1的示例可以使用1 * 1透明.png图像，也可以使用@vlgalik注释为1 * 1 base64编码
-
我有一个字体对象，我需要字体的宽度和高度。我知道getSize（）返回字体的高度，因为字体的点号通常是高度，但在确定字体的宽度时，我不知所措。 或者，能够确定字体支持的每个特定字符的宽度也是一个可接受的解决方案。 我的最佳猜测是，宽度是在使用loadFont方法时指定的，但文档没有指定size参数是表示字体的宽度还是高度。 使用的所有字体都是单空格字体，如DejaVu Sans mono、GNU
-
问题内容： 这是用于以下项目的项目 ://phlak.github.com/jColorClock/。如您所见，现在文本大小仅设置为静态大小。我希望文本始终是窗口宽度的90％，但也要相应地缩放垂直大小。有相对简单的方法吗？ 问题答案： 真是的！ 使用一些JavaScript调整窗口大小时，设置字体大小。（为了方便起见，我在这里使用了jQuery： 因为您的字体大小是在em（完美）中设置的，所以调整
-
我想知道如何将高度设置为