Zurb的基金会4如何计算排版？

Question

我一直在挖掘很多关于黄金比例和模块化比例的文章,试图了解排版在技术层面的运作方式.我不能说我完全理解它,但现在我对Zurb的基金会4更加困惑.

在他们的文档中,他们已经声明他们不再依赖/使用模块化比例来排版.所以我很想知道他们是如何想出这些数字的,尤其是他们的标题元素.

例如:这是他们的标题在他们的_type.SCSS中的写法

$h1-font-size:                         emCalc(44px) !default;
$h2-font-size:                         emCalc(37px) !default;
$h3-font-size:                         emCalc(27px) !default;
$h4-font-size:                         emCalc(23px) !default;
$h5-font-size:                         emCalc(18px) !default;
$h6-font-size:                         1em !default;

// Also...

$paragraph-font-size:                  1em !default;

我的问题;

1. 他们是如何得出这些价值的,以及他们如何在数学上相互联系？Docs似乎没有具体说明它是如何工作的.

2. 我想将段落字体大小(基线？)更改为18px(1.125em)而不是16px(1em) - 我将如何计算标题元素,以便它们是合适的/数学上合理的距离？

3. 我是否正确地假设更改标题大小从选择正文字体大小开始,然后从那里计算？

我非常感谢有关这个主题的任何建议,我不是最具数学思想的人,所以......要温柔.

谢谢!

Answer 1

// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)
@function emCalc($pxWidth) {
  @return $pxWidth / $em-base * 1em;
}

这是基金会用来计算它的函数,"$ em-base"应该为你提供全局背景.

我在Zurb当前的方法中发现的一件事是它没有提供足够的功率/足够灵活的em级联所以我通常将其修改为:

@function emCalc($target, $context:16) {
    @return $target / $context * 1em;
}

这允许您告诉元素的上下文.

Answer 2

字体大小值不一定是数学完美的计算结果。作者完全有可能尝试了一些值并认为“这看起来不错”。根据这篇文章，他们似乎最初使用14px @ 1:1.618、44px @ 1:1.618并进行了很多舍入，最终决定只使用18px而不是16.807. 使用模块化秤很好，但破坏它并不违法。

回答你的第二个问题， s 的伟大之处在于em它们是相对的！如果你想按比例缩放所有字体，只需更改正文上的字体大小即可：

body {
  font-size: 18px;
}

h1 {
  font-size: 3em;
}
h2 {
  font-size: 2em;
}
p {
  font-size: 1em;
}

演示

由于 Foundation 是以 em 方式完成所有操作，因此您无需编辑任何变量。