时间戳

首页 > 解决方案 > 根据容器的宽度和高度缩放字体大小

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

问题描述

所以我正在尝试为我的 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>

标签： htmlcss

解决方案

虽然font-sizeCSS 属性可以采用无单位的数字、百分比或相对单位的长度，但所有这些都是相对于父元素的font-size. 即使您使用 CSScalc函数，任何度量都将被理解为父元素的比率，而font-size不是元素的宽度或高度。

唯一的例外是rem和ren单位，它们是相对于<html>元素的font-size，vw和vh单位，它们分别是视口宽度和高度的百分比。也就是说，100vh是窗口的高度，是窗口100vw的宽度。Red Blob Games 有一篇关于使用单位进行响应式字体大小调整的有趣文章，我建议您阅读一下。vw

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

长话短说，没有 CSS-only 方法来设置相对于元素大小的字体大小。如果你真的想这样做，你将不得不使用 JavaScript 来计算元素的像素大小，然后将一个px值传递给font-sizeCSS 属性。

但到那时，您将积极反对 Web 的工作方式：元素拉伸以适应其内容，而不是相反。

推荐阅读