Question

因此，我正在尝试为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>

Answer 1

编辑：此方法可能是错误的。这会将字体大小设置为继承的字体大小的一部分，而不是父元素的宽度/高度。
请检查一下：

旧答案

使用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>

Answer 2

尽管font-size CSS属性可以采用相对单位的无单位数，百分数或长度，但所有这些都相对于父元素的font-size。即使您使用CSS calc函数，任何度量都应理解为父级font-size的比率，而不是元素的宽度或高度。

唯一的例外是rem和ren单位，它们相对于<html>元素的font-size，vw和{{1 }}单位，分别是视口的宽度和高度的百分比。换句话说，vh是窗口的高度，100vh是窗口的宽度。 Red Blob Games在100vw单元中使用interesting article用于响应字体的大小，我建议您阅读一下。

您可以使用CSS transforms来缩放元素的渲染大小，但这会使文本显得模糊或拉伸，这绝对不是您想要使网站具有响应性和可访问性时想要的。

长话短说，没有一种仅CSS的方式来设置相对于元素大小的字体大小。如果您确实要执行此操作，则必须使用JavaScript计算元素的大小（以像素为单位），然后将vw值传递给px CSS属性。

但是到那时，您将积极应对网络的工作方式：元素可以扩展以适合其内容，而不是相反。

根据容器的宽度和高度缩放字体大小

2 个答案: