Css 在正文字体大小和标题之间保持一定比例

是否可以在CSS中实现这一点：

我想在我的文档中保留排版层次结构。我想根据px中正文的字体大小动态更改标题的大小（保持比例）

假设我希望标题和正文大小保持同步，并根据正文在px中的字体大小进行更改。 如果正文的字体大小增加/减少，标题h1、h2、h3也会跟随并保持一个比例

---

这仅仅在CSS中是可行的吗？

问题是如何确保文档中的所有字体大小都与body元素中设置的大小成比例地更改

如果您在正文中设置了一个确定的大小，然后使用em单位调整字体大小，您会发现所有内容都会按比例变化

但是请注意，em单元本身就是一个相对单元。这实际上可能是你想要的，但要确保。考虑这个例子。div是h1元素的子元素，其字体大小与h1的字体大小成比例，而h1的字体大小本身与其父元素（body元素）的字体大小成比例。div不是h1的子元素，只是body元素的子元素，其字体大小仅与body的字体大小成比例。请参阅下面的代码片段

还有另一个单位rem（root em），它在文档的html e

leme

nt中设置。大多数浏览器将基本字体大小设置为16px，因此这就是1rem。您可以更改此设置，例如，根据rem设置我们的正文字体大小。这样做的主要原因是承认用户可以更改浏览器中的基本设置，也许他们希望所有文本都会自动变大，因此根据rem设置正文字体大小是考虑周到的

要使此运算更简单，请设置

html {
  font-size: 62.5%;
}

您的rem将是10px（或用户设置的任何部分）。然后让你的身体字体大小为24px（对于大多数用户或与用户浏览器设置成比例），通过

从那时起，在使用em或rem时，取决于在文档中的特定点适合您的情况，所有内容都将成比例，并且作为奖励，为用户提供更好的可访问性。 下面是一个片段来说明：

html：
字体大小：62.5%；/*大多数浏览器上的10px*/
}
身体{
字体大小：2.4rem；/*24px*/
}
h1{
字体大小：2em；/*48px*/
}
div{
字号：1.5em；
}

这只在体内
这是h1在正文内，字体大小为2em
这是h1内的div，字体大小为1.5em
这是h1在正文内，字体大小为2em
这是h1之外的div，字体大小为1.5em

是的，如果您在正文中设置了字体大小，其余的都应该跟随。如果确实将字体大小重置为标题，则使用rem单位根据正文字体大小调整标题大小。（在其他链接中找到）谢谢！我来看看那篇文章。非常感谢你的详细解释。现在我明白了为什么它不能正常使用像素。我会尽力落实你的建议。再次感谢您抽出时间。

body {
  font-size: 2.4rem;
}