Zurb-Foundation：缩小基本字体大小会导致切换顶部按钮显示得太早

Question

我是Zurb-Foundation的新手，所以请耐心等待这个问题。

我正在使用顶栏元素进行编辑，并希望使用切换顶部按钮进行小型显示。我还想减少网站的基本字体大小;但是当我在_variables.scss中将基本字体大小设置为12px时，切换顶部栏图标显示得太早了，比如900px左右，我猜。当我将基本字体大小保持在100％时，一切都按预期工作。我的基本字体大小在_variables.scss中设置如下：

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

我的HTML如下：

<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>

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

Answer 1

我打算将这个问题标记为回答，因为我学到了（正如我在这些情况下通常做的那样）问题是我的期望，而不是功能。

基本上，菜单图标的宽度为768px，符合设计要求。我以为它的数量会更少。我想在Zom基金会将提供更多断点选项，或者我必须自己做。