html - 调整/缩放内部容器中的字体

Question

我希望能够增加默认字体大小，但只能在特定的 DIV 内。

很明显，这似乎正是 ems 所针对的那种情况。我的问题是我只想增加字体大小，而不影响使用em设置大小的其他内容，例如填充和边距。

这可能看起来像是一个奇怪的用例，或者我可能只是“做错了™”。我这里的用例基本上如下:

我有一个显示包含表格数据的图表的网站。图表可以两种模式查看，摘要模式和完整模式。摘要模式显示较小版本的图表，省略了许多数据。 “完整”版本显示了所有内容，几乎占据了浏览器窗口的宽度。

我希望能够为两个版本使用相同的样式表。但“完整”版本可能应该有更大的字体大小。然而，“完整”版本(以及几乎所有在屏幕左侧对齐的模块)都有一定的左填充，这使所有文本与屏幕左边缘的距离保持相同。

如果我将“完整”版本的图表包装在一个 DIV 中，该 DIV 只是增加基 em，它也会增加填充，从而使图表中的数据不会与其他所有内容左对齐在屏幕上。

所以...

1. 有哪些解决方案可以在不增加填充的情况下增加字体大小？
2. 我是不是在某种程度上“做错了” - 将 em 单位用于填充或边距之类的东西是错误的吗？

Answer 1

例如在您的情况下，使用 rem 而不是 em 作为 padding，因为它不受其他元素变化的影响页面，因为它基于页面的根字体大小(如果我没记错的话是 html)。

在这里读得很好:https://j.eremy.net/confused-about-rem-and-em/