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>的字体大小为14px，行高为14px，边距为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。< / p>

另一方面，将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的大小列表（列表，因此我可以使用margin / padding简写），以及$ base-size是我想让它相对于的大小。

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

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

如果您不使用Sass，您仍然可以自己进行数学运算：

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

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

2 个答案: