根据容器的宽度和高度缩放字体大小[重复]

提问者：小点点

根据容器的宽度和高度缩放字体大小[重复]

因此，我正在努力为我的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个答案

匿名用户

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

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

匿名用户

虽然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的工作方式作斗争：元素伸展以适应它们的内容，而不是相反。