2013-12-16 33 views
2

我有一個基金會5模板,我想知道是否改變媒體查詢範圍是個好主意。基金會5:改變媒體查詢範圍

它們目前在_global.scss文件中設置,但我想通過我的_custom.scss文件覆蓋它們,所以我將來沒有任何升級框架的麻煩。問題是如果我在_custom.css文件中設置變量$ small-range,$ medium-range等等,什麼都不會發生。

我app.scss目前包括:

@import "settings"; 
@import "foundation"; 
@import "custom"; 

我怎麼能做到這一點,而無需編輯默認設置和組件文件?

預先感謝您。

回答

3

添加變量之前@import「基礎」

@import "settings"; 

$small-range: (0em, 40em); //max-width 640px, mobile-only styles 
$medium-range: (40.063em, 64em); // min-width 641px and max-width 1024px 
$large-range: (64.063em, 90em); // min-width 1024px and max-width 1440px 
$xlarge-range: (90.063em, 120em); //min-width 1441px and max-width 1920px 
$xxlarge-range: (120.063em);  //min-width 1921px 

@import "foundation"; 

,或者你可以創建自己的文件,如my_settings並添加這些樣式到這個文件:

@import "settings"; 
@import "my_settings"; 
@import "foundation"; 

如果你想改變一些範圍到px,更好地將所有範圍變成px從em

+0

嗨,感謝您的建議,但他們都似乎沒有工作。網格仍然在響應相同的分辨率。網格列(small-#,medium-#和large-#類)的寬度應與媒體查詢範圍相關,對吧? – user3108286

+0

更新回答上面 –

+0

_custom-settings.scss應用於我進行了更新後。 – user3108286