2

ゴールデン グリッド システムからズーム可能なベースライン グリッドを適応させてみてください: https://github.com/jonikorpi/Golden-Grid-System/blob/master/GGS.css

関連するCSSは次のとおりです（何かが欠けていない限り）：

/*
*
*   Zoomable baseline grid
*   type size presets
*
*/
body {
  /* 16px / 24px */

  font-size: 1em;
  line-height: 1.5em;
}
.small {
  /* 13px / 18px */

  font-size: 0.8125em;
  line-height: 1.3846153846153846em;
}
.normal, h3 {
  /* 16px / 24px */

  font-size: 1em;
  line-height: 1.5em;
  /* 24 */

}
.large, h2, h1 {
  /* 26 / 36px */

  font-size: 1.625em;
  line-height: 1.3846153846153846em;
}
.huge {
  /* 42px / 48px */

  font-size: 2.625em;
  line-height: 1.1428571428571428em;
}
.massive {
  /* 68px / 72px */

  font-size: 4.25em;
  line-height: 1.0588235294117647em;
}
.gigantic {
  /* 110px / 120px */

  font-size: 6.875em;
  line-height: 1.0909090909090908em;
}

私が理解できないのは、フォントサイズが大きくなると行の高さが小さくなるのはなぜですか?

独自のベースライン グリッドを作成しようとしていますが、このパターンになる方程式を推定することができないようです。

明らかにフォントサイズはクラシックの結果です

ターゲット ÷ コンテキスト = 結果

フォントサイズでその計算を行うと、うまくいきます。たとえば、h2 の場合:

26px ÷ 16px = 1.625em

しかし、その計算は行の高さではうまくいきません。

見知らぬ人は、.small クラスの行の高さが .large、h1、h2 の行の高さと同じである理由はまだあります...ただし、これは私の懸念事項の中で最も少ないものです。

4

1 に答える 1

2

@jonkorpi (Golden Grid System の作成者) 経由で:

「行の高さを計算するとき、コンテキストはその要素のフォントサイズになります。」

したがって、たとえば、上記の例の h2 の背後にある数学は次のように分解されます。

.large, h2, h1 {
    /* 
    target font size: 26px
    target line height: 36px

    font-size = 26 ÷ 16 x 1em
    line-height = 36 ÷ 26 x 1em
    */

    font-size: 1.625em;
    line-height: 1.3846153846153846em;
    }

または、別の言い方をすれば、行の高さを計算するには、次の式を使用できます。

ターゲットの行の高さ ÷ 要素のフォント サイズ = 結果

于 2012-02-12T18:36:05.180 に答える