今天小编跟大家讲解下有关垂直栅格和渐进式行距应用举例 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关垂直栅格和渐进式行距应用举例 的相关资料，希望小伙伴们看了有所帮助。
新问题
来也匆匆 去也“冲冲”。距上次发布垂直栅格与渐进式行距(上)发布 已经不知不觉过去了两个多月了。反过来 看看上次的成果。诶 怎么感觉边注有点奇怪呢
(demo-6.html)
还是参考我的这篇 关于排版的文章 ：我们知道
中文互联网上最常用的行距是1.5左右 行长越长,需要的越大的行距. (行距太小,读者阅读换行时容易串行. 行距太大,读者阅读行时会感觉到文字不连续.)看来 对于边注的12px字体大小的 24px的行高显然过大了。但是 根据上一篇文章的方法 垂直韵律需要边注的行距和正文的行距应当一致。那么为了保持 垂直韵律 我们只能同时减少左右两边的行距——总结：不靠谱。那么 我们该如何调整边注行距 却又能够让我们建立的垂直韵律生效呢 这就需要我们引入渐进式行距。
渐进式行距
总得说来 渐进式行距是对死板的垂直韵律的一个补充。垂直韵律是要求边注和正文的每一行都对 齐。相比之下 渐进式行距让边注和正文也对齐——但不是每一行——而是每几行对齐一次。一般是每4行或者每5行对齐一次。我们回顾一下上一篇文章 知道 本文开始的那张例子 “配置”如下：
正文：字体大小14px 行距24px 段后距24px h1：字体大小24px 行距24px 段前距24px 段后距24px h2：字体大小：18px 行距24px 段前距12px 段后距12px 边注正文：字体大小12px 行距24px 段后距24px 边注边框：边框粗1px 内补白11px——别忘了还要把它上移12px我们修改边注的行距和段后距都为18px。那么情况就会像这样：
(demo-9.html)
不知道各位看官发现了没有 为什么第一行基线没对齐呢 这是因为流布局会将文字块按照行高做顶端对齐。如下图：
所以 在这里 为了使首行基线对齐 我们还要将边注下降一定的像素。可恨的是 需要下降的像素是多少——这个很复杂的问题 至少经过不才好几次的尝试都没有看出个规律来 而只得出以下三个结论：
设正文行高是h px 边注行高是h’ px 需要下降的值为d px 那么 这个值将介于 1/2(h-h’) < d < (h-h’) . ① 如果该行引入了西文字符(半角数字或者字母) 该行的基线有时会比没有西文字符偏移一个像素。 不同的字体渲染引擎可能行为不一致。 上一页12 3 下一页 阅读全文来源：爱蒂网
