Sass Zurb Foundation：减小基本字体大小会导致toggle topbar按钮过早显示

我是Zurb基金会的新成员，所以请在这个问题上耐心听我说

我是蒙骗与顶栏元素，并希望有切换小显示顶栏按钮。我还想减少网站的基本字体大小；但是当我在_variables.scss中将基本字体大小设置为12px时，toggle topbar图标显示得太早了，我猜大概是900px左右。当我将基本字体大小保留为100%时，一切都按预期进行。我的基本字体大小在_variables.scss中设置如下：

$base-font-size: 12px !default;
$em-base: $base-font-size !default;

<nav class="top-bar">
<ul class="title-area">
     <li class="name">
           <h1>@Html.ActionLink("Application name", "Index", "Home")</h1>
      </li>
      <li class="toggle-topbar menu-icon">
            <a href="#"><span>Menu</span></a>
       </li>
</ul>
</nav>

我的html如下所示：

$base-font-size: 12px !default;
$em-base: $base-font-size !default;

<nav class="top-bar">
<ul class="title-area">
     <li class="name">
           <h1>@Html.ActionLink("Application name", "Index", "Home")</h1>
      </li>
      <li class="toggle-topbar menu-icon">
            <a href="#"><span>Menu</span></a>
       </li>
</ul>
</nav>

@ActionLink（“应用程序名”、“索引”、“主页”）

---

我还需要做些什么来确保设置基本字体大小不会损坏切换顶栏设置？

我将把这个问题标记为回答，因为我了解到（在这些情况下通常是这样做的）问题出在我的预期中，而不是功能上

---

基本上，菜单图标的宽度为768px，与设计相同。我想应该是一个较小的数字。我想在Surt Zurb基金会会提供更多的断点选项，或者我必须自己去做。

我会说，自从你改变了$EM基础（它被用来通过EMCCAC计算媒体查询的维度），你基本上调整了整个响应行为（断点结果）。如果您想使用较小的基本字体，可以尝试使用$em-base这样的$em-base:16px！违约（我在盒子里有这样的基础）。或者您可以在这一行中向_top-bar.css添加一个固定值$topbar breakpoint:emCalc（940px）！违约也就是说，不使用emCalc，只需显式设置940px。虽然我会选择第一种解决方案。@vladsaling谢谢您的帮助！我知道em-base和font-base值是如何相互作用的，并按照_-variables文件中的注释中的建议，专门将两者设置为相等，以保持网格大小与基本字体同步。否则，当你缩小字体大小时，网格所使用的实际房地产大幅缩水，这不是我想要的。没有问题：基金会可能很棘手。