有没有办法根据正文的字体大小指定行高和边距？

Question

一个直截了当的 CSS 问题。假设我们有这样的样式：

  body { 
    font-size : 16px;
  }

  p {
   font-size : 0.875em; // relative to parent, 14px
   line-height : 1em; //relative to this element, 14px
   margin-bottom : 1em; //relative to this element, 14px
  }

这意味着<p>s 的 font-size 为 14px，line-height 为 14px，margin-bottom 为 14px。

我想要的是相当于：

body : {
  font-size : 16px;
}

p { 
  font-size : 0.875em; // relative to parent, 14px;
  line-height : 1em; // relative to parent line-height, 16px;
  margin-bottom : 1em; // relative to parent margin-bottom, 16px;
}

我想要这个的原因是因为我想要一个尊重其基线的响应式字体大小。

Answer 1

从技术上讲，您可以使用rem，尽管它指的是html 元素的字体大小（因此您需要使用html 选择器，而不是body，并让body 继承来自html)。但是，浏览器支持有限。

所以最好使用em 单位，只要考虑到您的其他设置。如果p 具有font-size: 0.875em，那么要将边距设置为其父字体大小的值（计算1/0.875），您将使用相反的值：margin-bottom: 1.143em。

另一方面，很自然地将body元素的字体大小视为复制文本的大小，而p元素通常是复制文本。因此，将font-size 的body（如果您设置的话）设置为所需的复制文本大小会更自然。这会让事情变得容易一些。

Answer 2

如果您始终知道父元素的大小和子元素的大小，那么我可以为您提供 Sass 的解决方案。

@function em2baseline($font-size, $size: 1em, $base-size: 1em) {
    $collector: ();

    @each $s in $size {
        $collector: append($collector, ($s / $font-size * $base-size));
    }
    @return $collector;
}

$font-size 是子元素的大小，$base-size 是相对于我的$base-size 的大小列表（一个列表，因此我可以将它与边距/填充简写一起使用），$base-size 是我想让它相对于大小。

@debug em2baseline(2em);
// 0.5em

@debug em2baseline(2em, 1.5em);
// 0.75em

如果您不喜欢使用 Sass，您仍然可以自己计算：

[size you want] / [child size] * [base size]