html - Zurb Foundation 4 默认正文字体大小更改导致布局宽度问题

Question

我的要求是，如果开发人员在网页上的任意位置键入一些没有特定标记( <p> 等)的文本，字体大小应与 <p> 相同标签的字体大小。

在foundation.css我已经更改了 html,body { font-size:0.85 } .通过此编辑，整个布局(整个站点模板)正在缩小。增加大小会导致反之亦然。

有没有其他方法可以在不损害模板的情况下安全地将我们自己的默认 body font-size 引入基础？

有没有什么建议可以在不向内容包装 div 引入新的 font-size 属性的情况下实现我的要求？

Answer 1

Zurb 使用您在 html, body {} 样式中指定的字体大小来计算网站的宽度。无论您将 font-size 值设置为多少，整个站点都将变为 1em。如果您进一步查看 css，您会发现 .row {} 的定义类似于 max-width: 62.5em。

您可以想象，当您减小 1em 的值时，行的 62.5em 值也会变小。我不太了解如何使用 zurb 的 css 版本修改它，因为我一直使用 sass gem，但您可以调整行宽的 em 数。

尝试:

所需的站点宽度/正文字体大小(以 px 为单位)= 您的行最大宽度应为的 em 数。

例如

如果你想要 960 宽度，基本字体大小为 12px

960/12 = 80

因此，您可以将行最大宽度设置为 80em。

我相信更有资格的人会出现并给出更好的答案，但这就是我对网格的理解。