Question

如何通过css而不是SaSS更改Zurb Foundation块的断点？

例如，在我的代码中，我定义了large-block-grid-3和medium-block-grid-2，但它看起来很小的方式不符合我的喜好，我希望它以不同的宽度打破。我希望能够声明一个列网格，但仅限于特定的自定义宽度。

Answer 1

在css中，您将搜索要更新的媒体查询的所有引用，并根据需要进行更改。 _settings.css中的媒体查询是：

媒体查询范围

＆＃13;

$small-range: (0em, 40em);
$medium-range: (40.063em, 64em);
$large-range: (64.063em, 90em);
$xlarge-range: (90.063em, 120em);
$xxlarge-range: (120.063em);

＆＃13;

在基金会5之前记住，没有＆＃34;媒体＆＃34;阶级观念。

感谢this post on Zurb University提供信息。

编辑：查找这些媒体查询，并在出现的任何地方更改所需的课程。当然，如果您正在运行scss，这会更容易。您也可以尝试制作自己的媒体查询，并使用您的属性覆盖您想要的类;你的css必须在基础css之后才能工作。

＆＃13;

@media only screen and (min-width: 40.063em)

@media only screen and (min-width: 64.063em)

@media only screen and (min-width: 90.063em)

@media only screen and (min-width: 120.063em)

＆＃13;

Answer 2

您可以在_settings.scss中覆盖Foundation 6断点变量，如下所示：

$breakpoints: (
  small: 0,
  medium: 768px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

在CSS中改变Zurb基础网格的断点

2 个答案: