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

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

他们在docs中表示他们不再依赖/使用模块化尺度进行排版.所以我很想知道他们是如何想出这些数字的,尤其是他们的标题元素.

例如：这是他们的标题在他们的_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;

我的问题;

>他们是如何得出这些价值观的,以及它们如何在数学上相互关联？ Docs似乎没有具体说明它是如何工作的.
>我想将段落字体大小(基线？)更改为18px(1.125em)而不是16px(1em) – 我将如何计算标题元素,以便它们是合适的/数学上合理的距离分开？
>我是否正确地假设更改标题大小从选择正文字体大小开始,然后从那里计算？

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

谢谢！

最佳答案

字体大小值不一定是数学完美的一些计算.作者完全有可能尝试了一些价值并认为“这看起来不错”.基于这个article,似乎他们最初使用的是14px @ 1:1.618,44px @ 1:1.618并且很多,并最终决定只使用18px而不是16.807.使用模块化规模很好,但打破它并不违法.

要回答,你的第二个问题,关于ems的伟大之处在于它们是相对的！如果要按比例缩放所有类型,只需更改正文的字体大小：

body {
  font-size: 18px;
}

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

Demo

由于基金会在ems中完成所有工作,因此您无需编辑任何变量.

原文地址：https://www.jb51.cc/css/427331.html