1

一个直截了当的 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;
}

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

4

2 回答 2

2

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

因此em，仅考虑您的其他设置，使用该单元是一个更好的主意。如果phas font-size: 0.875em，则要将边距设置为其父字体大小的值（计算 1/0.875），您将使用相反的值：margin-bottom: 1.143em。

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

于 2012-11-22T21:06:10.657 回答
1

如果您始终知道父元素的大小和子元素的大小，那么我可以为您提供 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]
于 2012-11-22T21:03:36.430 回答