基金會6 - 斷點密新 - 「介質」設置不正確

我試圖設置一個不同的字體大小的介質屏幕和只有較小的：產生基金會6 - 斷點密新 - 「介質」設置不正確

// _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）。

我忘記了什麼嗎？在我的設置也許？

UPDATE

我頂嘴項文件：

@charset 'utf-8'; 

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

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

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

來源

2017-03-08 Adrien G

這樣做的原因是，你是設置斷點「所有媒體的」 ==> 640像素，以1000像素和「所有的小「==> 0px到640px。因此max-width = 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; 
}

來源

2017-03-09 10:37:41 tymothytym

感謝。我用'@include breakpoint（medium only）{font-size：3rem}'進行測試，生成的CSS是@media screen和（max-width：62.4375em）和（min-width：40em）'。然後我嘗試了你的修復（'小隻'），但沒有生成CSS：s –

當你構建時你有錯誤嗎？例如：'WARNING：breakpoint（）：「small」沒有在$ breakpoints設置中定義。'我已經添加了上面的替代方法，但它基本相同。 – tymothytym

同樣的行爲...我更新了我的問題sass入口文件，這是'_settings.scss'：https://gist.github.com/aguidis/234bdcbb8fb4fd1b54f8ff45dd167ae2 –

基金會6 - 斷點密新 - 「介質」設置不正確

回答

相關問題