我一直在研究大量关于黄金比例和模块化比例的文章,试图从技术层面了解排版的工作原理。我不能说我完全理解它,但我现在对 Zurb 的 Foundation 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;
我的问题;
它们是如何得出这些值的,以及它们在数学上如何相互关联?文档似乎没有具体说明它是如何工作的。
我想将段落字体大小(基线?)更改为 18px (1.125em) 而不是 16px (1em) - 我将如何计算标题元素以便它们是合适的/数学上合理的距离?
我是否可以假设更改标题大小是从选择正文字体大小开始,然后从那里开始计算的?
我非常感谢关于这个主题的任何建议,我不是最有数学头脑的人所以..要温柔。
谢谢!
最佳答案
// 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 的级联那样提供足够的功率/足够的灵 active ,因此我通常将其修改为:
@function emCalc($target, $context:16) {
@return $target / $context * 1em;
}
这使您可以判断元素所处的上下文。
关于css - Zurb 的 Foundation 4 如何计算 Typography?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15876353/