Foundation5 - 改变顶栏断点
Foundation5 - Changing topbar breakpoint
我正在尝试更改顶部栏的断点并以某种方式取得了成功。视觉方式。但是你切换它的部分将无法工作,直到你进入小视图大小。
我已经更改了这些设置。为了设置新断点,我还需要更改其他内容吗?杰士? SASS?
$topbar-breakpoint: #{lower-bound($large-range)} !default; // Change to 9999px for always mobile layout
$topbar-media-query: $large-up !default;
如果我查看生成的 HTML 中顶部栏的元数据。我找到这个标签:
<meta class="foundation-mq-topbar">
其中包含:
meta.foundation-mq-topbar {
font-family: "/only screen and (min-width:64.063em)/";
width: 64.063em;
}
首先,确保您正在使用 _settings.scss
文件而不是 _top-bar.scss
文件编辑顶部栏设置。您不应直接编辑任何 Foundation 组件。
如果您只更改 $topbar-breakpoint
值,它应该可以工作。将 $topbar-media-query
保留为其默认值。您还应该删除 !default
标志。
$topbar-breakpoint: #{lower-bound($large-range)}; // Change to 9999px for always mobile layout
$topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})";
我正在尝试更改顶部栏的断点并以某种方式取得了成功。视觉方式。但是你切换它的部分将无法工作,直到你进入小视图大小。
我已经更改了这些设置。为了设置新断点,我还需要更改其他内容吗?杰士? SASS?
$topbar-breakpoint: #{lower-bound($large-range)} !default; // Change to 9999px for always mobile layout
$topbar-media-query: $large-up !default;
如果我查看生成的 HTML 中顶部栏的元数据。我找到这个标签:
<meta class="foundation-mq-topbar">
其中包含:
meta.foundation-mq-topbar {
font-family: "/only screen and (min-width:64.063em)/";
width: 64.063em;
}
首先,确保您正在使用 _settings.scss
文件而不是 _top-bar.scss
文件编辑顶部栏设置。您不应直接编辑任何 Foundation 组件。
如果您只更改 $topbar-breakpoint
值,它应该可以工作。将 $topbar-media-query
保留为其默认值。您还应该删除 !default
标志。
$topbar-breakpoint: #{lower-bound($large-range)}; // Change to 9999px for always mobile layout
$topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})";