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必要があります)。ただし、ブラウザのサポートは制限されています。htmlbodybodyhtml

したがってem、他の設定を考慮して、ユニットを使用することをお勧めします。pがの場合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は my を基準としたサイズのリスト$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 に答える