css - 调整以 rems 为单位的字体大小

Question

所以我最近开始调整 rems 中的字体大小，以避免在嵌套 li 之类的情况下使用 ems 时出现的后代问题。

所以我将 html 字体大小调整为 62.5%，这样我就可以执行 p {font-size 2.5rem}/* 25px */

当我想改变某个元素的字体大小时，问题就出现了，通常我只是给父元素说一个文本 block 的大小 0.8em 来让元素变小一点。但是由于 rems 是相对于 html 元素的，我不能只写 .parent {font-size 0.8rem}，因为它不会影响其中的任何内容。

我也对如何使用媒体查询调整大小感到困惑。我是再次写出我所有的选择器，还是只为我的 html 提供小于 62.5% 的字体大小，以便在较小的屏幕尺寸下字体更小？

几天来我一直在阅读有关字体大小调整的内容，我很想就什么是最佳实践获得明确的答案。

Answer 1

老实说，我认为使用 62.5% 会导致不好的做法，这就是您现在遇到困惑的原因(阅读此文:http://csswizardry.com/2011/05/font-sizing-with-rem-could-be-avoided/)。我建议学习如何在使用 100% 的字体大小时进行数学计算。然后您只需完全按照您所说的去做，只需减小较小屏幕的根字体大小(这样会更有意义)。

例如，如果您使用 100% (16px) 的根字体大小，并且您想要 20px 的字体大小，请使用此公式:

font-size = target / context

所以在这种情况下，您可以执行 20/16，这会得到 1.25rem。

此外，当您想更改特定元素的字体大小时，最好直接更改该元素，而不是更改父元素。这样，当您或其他人正在寻找字体大小时，它就在一个有意义的地方!

此外，如果您希望嵌套字体大小，您仍然可以混合使用 rem 和 em。