Zurb Foundation : 媒体顶部栏菜单按钮

Question

我想以中小屏幕尺寸显示菜单按钮并折叠我的顶栏，而不仅仅是像默认行为那样以小尺寸显示。

我尝试了一些设置：

$topbar-breakpoint: #{upper-bound($large-range)}; // Change to 9999px for always mobile layout

但它似乎不起作用......

Answer 1

在您的_settings.scss 中取消注释

// $topbar-breakpoint: #{upper-bound($medium-range)};
// $topbar-media-query: "only screen and (min-width: #{upper-bound($medium-range)})";

$topbar-breakpoint, $topbar-media-query 使用upper-bound 从断点var 获取高值，这实际上是一个数组 64.xxem 和 90em。

现在而不是像下面这样的upper-bound use lower bound..

$topbar-breakpoint: #{lower-bound($large-range)};
$topbar-media-query: "only screen and (min-width: #{lower-bound($large-range)})"

如果我遗漏了什么，请告诉我！我没有对此进行测试，因为我从不使用较少的文件，但我认为这就是它的工作原理！