Question

我的要求是，如果开发人员在网页上的任何位置输入一些没有特定标记（<p>等）的文字，则字体大小应与<p>标记字体相同 - 大小

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

有没有其他方法可以安全地将我们自己的默认正文字体大小引入基础而不会损害模板？

在没有向内容包装div引入新的font-size属性的情况下，是否有任何建议可以实现我的要求？

Answer 1

Zurb使用您在html，body {}样式中指定的字体大小来计算网站的宽度。无论你设置什么字体大小值在整个网站变为1em。如果你在css中向下看，你会发现.row {}的定义看起来像max-width：62.5em。

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

尝试：

px中所需的网站宽度/正文字体大小=行最大宽度应为的ems数。

e.g。

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

960/12 = 80

因此，您可以将行max-width设置为80em。

我敢肯定会有更好的合格人员来提供更好的答案，但这就是我对网格的理解。

Answer 2

看起来你没有使用sass，所以这对这个特定的人没有帮助，但如果有人使用sass ，请注意{{的基础源代码中的这个评论1}}：

典型的默认浏览器字体大小是16px，这使得网格计算。 如果您想要基本字体大小不同且没有影响网格断点，设置$ em-base 到$ base-font-size并确保$ base-font-size是px值。

（强调补充）

所以在导入任何或所有基础sass文件之前，你会写这样的东西：

components/_variables.scss

注意：“上面的典型默认浏览器字体大小是16px”。 Foundation使用normalize.css，而normalize会将其设置为默认值。

Answer 3

请勿修改foundation.css，而是在您自己的“单独”css文件中定义自己的样式。如果您这样做，例如：

body {
    font-size: 1.5em;
}

并且具有以下布局，您将看到网格仍然响应设备/浏览器的宽度。

<div class="large-12 columns">    
    <div class="row">
        <div class="large-4 columns">
            <div class="panel">
                <p>Four columns</p>
            </div>
        </div>
        <div class="large-4 columns">
            <div class="panel">
                <p>Four columns</p>
            </div>
        </div>
        <div class="large-4 columns">
            <div class="panel">
                <p>Four columns</p>
            </div>
        </div>
    </div>
</div>

See it in action here

Answer 4

我能想到的最简单的解决方案是在内容区域（或整个页面）周围创建一个包装元素，并按如下方式更改字体大小：

<div class="content">
<p>My stuff</p>
<a href="#" class="button">A button</a>
</div>

然后在你的CSS中：

.content * {
font-size: 90% !important;
}

未经测试，但我确信我过去做过类似的事情。

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

4 个答案: