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

这样做的原因是你要将断点设置为＆＃34;所有中等＆＃34; ==＆GT; 640px到1000px和＃34;所有小的＆＃34; ==＆GT; 0px到640px。因此max-width = 62.4375em或16 * 62.4375em = 999px。

如果您的目标是从640px下降＆＃34;＆＃34;那么你只需要：

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

基础6 - 断点Mixin - ＆＃34; medium＆＃34;没有正确设置

1 个答案: