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

【问题标题】：Foundation 5: change media query ranges基础 5：更改媒体查询范围
【发布时间】：2014-01-04 05:36:00
【问题描述】：

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

它们当前设置在 _global.scss 文件中，但我想通过我的 _custom.scss 文件覆盖它们，所以我以后升级框架没有任何麻烦。问题是，如果我在 _custom.css 文件中设置变量 $small-range、$medium-range 等，则不会发生任何事情。

我的 app.scss 目前包括：

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

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

提前谢谢你。

【问题讨论】：

标签： sass zurb-foundation compass-sass

【解决方案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

【讨论】：

您好，感谢您的建议，但它们似乎都不起作用。网格仍在以相同的分辨率响应。网格列的宽度（小#、中#和大#类）应该与媒体查询范围有关，对吧？
在我更新凉亭后应用了 _custom-settings.scss。