Foundation 6 - 断点 Mixin - “medium”未正确设置

Question

我尝试为中等屏幕和更小的屏幕设置不同的字体大小：

// _settings.scss

$global-font-size: 100%;
$global-width: rem-calc(1000);
$breakpoints: (
    small: 0px,
    medium: 640px,
    large: 1000px
);


// _header.scss

.top-bar-left {

    h1 {
        font-size: 1.5rem;

        @include breakpoint(medium down) {
            font-size: 3rem;
        }
    }
}

生成以下 CSS：

@media screen and (max-width: 62.4375em)
.top-bar .top-bar-left h1 {
    font-size: 3rem;
}

这是问题所在，因为我想要中等大小（640px 40em 而不是 62.5em）。

我是不是忘记了什么？也许在我的设置中？

更新

我的 sass 入口文件：

@charset 'utf-8';

@import 'settings';
@import '../node_modules/foundation-sites/scss/foundation';

/**
 * Foundation 6
 */
@include foundation-everything;

/**
 * App
 */
@import 'base';
@import 'header';
@import 'homepage';

Answer 1

原因是您将断点设置为“所有中等”==> 640px 到 1000px 和“所有小”==> 0px 到 640px。因此最大宽度 = 62.4375em 或 16 * 62.4375em = 999px。

如果您的目标是“从 640 像素以下”，那么您只需要：

@include breakpoint(small only) {
    font-size: 3rem;
}

应该评估为：

@media screen and (max-width: 39.9375em) {
    font-size: 3rem;
}

其中 39.9375em * 16 = 639px。

编辑 或者，您可以使用断点功能：

@media screen and #{breakpoint(small only)} {
    font-size: 3rem;
}