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

Question

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

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

Answer 1

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

媒体查询范围

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

记得在 Foundation 5 之前没有 "medium" class 概念。

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

编辑：找到这些媒体查询并更改你想要的 class，无论它出现在哪里。当然，如果您是运行 scss，这会更容易。您也可以尝试制作自己的媒体查询并使用您的属性覆盖您想要的 class ；您的 css 必须在基础 css 之后才能生效。

@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)

Answer 2

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

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

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

Changing Breakpoint for Zurb Foundation Grid in CSS

css

zurb-foundation