Question

我有一个Foundation 5模板，我想知道更改媒体查询范围是否是一个好主意。

它们当前设置在_global.scss文件中，但我想通过_custom.scss文件覆盖它们，所以我将来没有任何麻烦升级框架。问题是如果我在_custom.css文件中设置变量$ small-range，$ medium-range等没有任何反应。

我的app.scss目前包括：

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

如何在不编辑默认设置和组件文件的情况下执行此操作？

提前谢谢。

Answer 1

在@import“foundation”之前添加变量

@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，最好将所有范围从em

更改为px

基础5：更改媒体查询范围

1 个答案: