根据容器的宽度和高度缩放字体大小[重复]
Posted
技术标签:
【中文标题】根据容器的宽度和高度缩放字体大小[重复]【英文标题】：Scaling font size based on width and height of container [duplicate] 【发布时间】：2021-02-13 11:56:46 【问题描述】：所以我正在尝试为我的 html 文档设计一个更具响应性的设计，我想要排序的第一件事是 字体大小的缩放，具体取决于 高度和容器的宽度。现在我有以下内容：
我研究了一下，发现 css 中的单位“vw”允许字体根据容器进行缩放，但我只是注意到它只有在我调整浏览器宽度时才有效类似：
如图所示，如果我调整浏览器的宽度，文本确实会缩放，但是，我意识到当我调整浏览器的高度时，它不会缩放完全没有。
如何确保文本根据容器的width和height进行缩放？
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>【问题讨论】：
***.com/questions/30693928/… 这是一个类似的问题，请检查我的答案以了解我尝试做的事情。 您可以尝试使用CSS Clamp() 之类的内容。这取决于视口大小和基本字体。 我还可以添加使用calc() 和 CSS 变量以及视口单元 vmin，例如 calc(var(--font-size) * 1vmin) 可能会有所帮助。
【参考方案1】：
虽然font-size CSS 属性可以采用相对单位的无单位数字、百分比或长度，但所有这些都与父元素的font-size 相关。即使您使用 CSS calc 函数，任何度量都将被理解为父元素的 font-size 的比率，而不是元素的宽度或高度。
唯一的例外是rem 和ren 单位，它们与<html> 元素的font-size 和vw 和vh 单位相关，它们分别是视口宽度的百分比和高度。换句话说，100vh 是窗口的高度，100vw 是窗口的宽度。 Red Blob Games 有一个 interesting article 使用 vw 单位进行响应式字体大小调整，我建议您阅读一下。
您可以使用CSS transforms 来缩放元素的渲染大小，但这会使文本显得模糊或拉伸，这绝对不是您在尝试使网站具有响应性和可访问性时想要的。
长话短说，没有唯一的 CSS 方法来设置相对于元素大小的字体大小。如果你真的想这样做，你将不得不使用 javascript 来计算元素的像素大小，然后将 px 值传递给 font-size CSS 属性。
但到那时，您将积极反对网络应有的工作方式：元素拉伸以适应其内容，而不是相反。
【讨论】：
那篇 Red Blob Games 文章将 madebymike.com.au/writing/precise-control-responsive-typography 列为其来源之一，也是另一个有趣的参考。【参考方案2】：编辑：这种方法可能是错误的。 这会将字体大小设置为继承字体大小的一部分，而不是父元素的宽度/高度。 请查看：
-
It might not be possible with only css.
Em is not the correct answer as it relates to font-size of parent element and not its height or width.
旧答案
使用 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>【讨论】：
以上是关于根据容器的宽度和高度缩放字体大小[重复]的主要内容，如果未能解决你的问题，请参考以下文章