基础6-断点Mixin -“中等”未正确设置

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

这是个问题，因为我想要中型的(640‘s <=> 40’s，而不是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

原因是您将断点设置为"all of medium“==> 640 0px至1000 0px，"all of ==> 0px”设置为640 0px。因此，最大宽度= 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.9375 16 *16=639 16。

编辑也可以使用断点函数：

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