尝试调整黄金网格系统中的可缩放基线网格: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;
}
我不明白的是:为什么行高随着字体大小变大而变小？
我正在尝试制作自己的基线网格，但我似乎无法推断出导致这种模式的方程。
显然，字体大小来自经典的结果
target ÷ context = result
如果你对字体大小进行数学计算，就会成功。例如对于 h2:
26 像素 ÷ 16 像素 = 1.625em
但是这个数学运算对于行高来说是崩溃的。
更奇怪的是为什么 .small 类的行高与 .large、h1、h2 的行高相同......但是，这是我最不关心的。
最佳答案
来自 Jon Korpi(黄金网格系统的创建者):
When calculating a line-height, the context becomes the font-size of that element.
因此，例如，上例中 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;
}
或者，换句话说，要计算行高，可以使用以下公式:
目标行高 ÷ 元素字体大小 = 结果
关于CSS 基线网格 - 为什么行高变小而字体大小变大？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9250047/