相对于父元素的CSS字体大小调整

Question

6

在CSS中是否有一种字体大小单位，可以让我相对于父元素指定大小；例如，vw和vh是相对于视口宽度和高度的。

我想要一个响应式设计中相对于父元素的大小。比如说，如果我的父元素宽度为400px，我希望我的文本宽度为其一半，但我不确定是否可以指定这样的大小——或者这样的功能是否被广泛支持。

- Matthew Layton

1

你需要使用Javascript。 - Etheryte

2

如果你在SO上搜索，你会看到很多结果，但是据我所知没有纯CSS解决方案，也许可以使用视窗单位。另外需要注意的是，font-size:200px并不意味着高度为200px。 - Stickers

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marcelo Velasquez · Answer 1

我刚刚遇到了这个问题，并解决了它：

:root{
    --some-width: 228pt;
}
.someElement{
    font-size: calc(var(--some-width) / X);
}

用一个数字替换X。

在我的情况下很有用，因为我需要同样的东西以不同的尺寸多次使用。

- user9485575 · Answer 2

在这种情况下，您应该在子元素上使用 em 值。 一个em（1em）等于当前字体大小。因此，例如，如果父元素的字体大小为16px，则1em等于16px，2em等于32px，依此类推...

- Jordan D. Angus · Answer 3

只需使用 em 而不是 px 或 pt 作为 font-size 值。例如，如果您有一个宽度和高度为 400px 的 div，请使用 font-size: XXem（其中 xx 是数字值）。或者，您也可以在字体大小中包含 %。