web - 响应式网页排版(以ems计算行高)需要代码解释

Question

我试图理解进入以下 CSS 样式的 CSS 计算过程。该代码来自响应式 Wordpress 主题，我无法弄清楚作者是如何得出 <h> 行高的 em 值的。元素。我已经在 here. 完成了以下教程

该教程非常有帮助，但我看不出下面显示的代码的作者是如何得出他/她的数字的。如果有人能解释一下这位作者使用的公式和过程，我将不胜感激。看起来 14px 是基本字体大小，22px 是产生 1.57142857 (22/14 = 1.57142857) 的基本行距的基本边距。除此之外，我看不出作者为元素设置行高值的原因。

body { font:normal 14px/1.57142857 Arial,"Helvetica Neue",Helvetica,sans-serif; }

h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, address,
dl, ol, ul, table,
legend, hr, figure {    
margin-bottom:22px;
}

li > ul,
li > ol {
margin-bottom:0; 
}

/* Headings */
h1, .h1 { font-size:60px; line-height:1.10000000; font-weight:normal;  }
h2, .h2 { font-size:36px; line-height:1.16666667; font-weight:normal;  }  
h3, .h3 { font-size:24px; line-height:1.25000000; font-weight:normal;  }
h4, .h4 { font-size:18px; line-height:1.33333333; font-weight:normal; }
h5, .h5 { font-size:14px; line-height:1.57142857; font-weight:normal; }
h6, .h6 { font-size:12px; line-height:1.57142857; font-weight:normal; }

Answer 1

作者肯定用了一个modular scale.

检查 description Zurb 的基础框架如何使用它。